position:absolute;を指定した2つの要素（中身は同じ）を重ねると，何故かズレが発生する問題

■現状

まずはこちらをご覧ください（Thimbleのアカウントがあれば，編集内容を保存できます）

https://thimbleprojects.org/liveasnotes/528101/

reCAPTCHAもどきをCSSで作ってみようとしたのですが，
正解の要素を選択したときに，画像下部のボタンがズレて表示されてしまいます

■やりたかったこと

特定の要素を選択すると，もともとの確認ボタンの上に，別の確認ボタン（見た目は同じ）を表示させる
もともとのボタンを押した時と，別のボタンを押した時とで，表示する内容を変える

（：選択されたグリッドによって，表示される内容を変える）

この①をしようとしたところ，上画像のようなバグ？にあたりました

■ソースコード

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5  <head>
6    <meta charset="utf-8">
7    <meta name="author" content="liveAsNotes">
8    <meta name="description" content="this is a demo">
9    <meta name="format-detection" content="telephone=no, address=no, email=no">
10    <meta name="viewport" content="width=device-width, initial-scale=1.0">
11    <meta http-equiv="X-UA-Compatible" content="IE=edge">
12    <link rel="stylesheet" href="style.css">
13    <title>CSS reCAPTCHA</title>
14  </head>
15  <body>
16    <input id="f01" type="checkbox">
17    <input id="f02" type="checkbox">
18    <input id="f03" type="checkbox">
19    <input id="f04" type="checkbox">
20    <input id="f05" type="checkbox">
21    <input id="f06" type="checkbox">
22    <input id="f07" type="checkbox">
23    <input id="f08" type="checkbox">
24    <input id="f09" type="checkbox">
25    <input id="f10" type="checkbox">
26    <input id="f11" type="checkbox">
27    <input id="f12" type="checkbox">
28    <input id="f13" type="checkbox">
29    <input id="f14" type="checkbox">
30    <input id="f15" type="checkbox">
31    <input id="f16" type="checkbox">
32    <input id="f17" type="checkbox">
33    <input id="f18" type="checkbox">
34    <input id="f19" type="checkbox">
35    <input id="f20" type="checkbox">
36    <input id="f21" type="checkbox">
37    <input id="f22" type="checkbox">
38    <input id="f23" type="checkbox">
39    <input id="f24" type="checkbox">
40    <input id="f25" type="checkbox">
41    <input id="f26" type="checkbox">
42    <input id="f27" type="checkbox">
43    <input id="f28" type="checkbox">
44    <input id="f29" type="checkbox">
45    <input id="f30" type="checkbox">
46    <input id="f31" type="checkbox">
47    <input id="f32" type="checkbox">
48    <input id="f33" type="checkbox">
49    <input id="f34" type="checkbox">
50    <input id="f35" type="checkbox">
51    <input id="f36" type="checkbox">
52    <input id="f37" type="checkbox">
53    <input id="f38" type="checkbox">
54    <input id="f39" type="checkbox">
55    <input id="f40" type="checkbox">
56    <input id="f41" type="checkbox">
57    <input id="f42" type="checkbox">
58    <div id="captcha" class="container">
59      <div id="disc">Sellect all yellow.</div>
60      <ul id="bg_wrapper">
61        <li><label for="f01"></label></li>
62        <li><label for="f02"></label></li>
63        <li><label for="f03"></label></li>
64        <li><label for="f04"></label></li>
65        <li><label for="f05"></label></li>
66        <li><label for="f06"></label></li>
67        <li><label for="f07"></label></li>
68        <li><label for="f08"></label></li>
69        <li><label for="f09"></label></li>
70        <li><label for="f10"></label></li>
71        <li><label for="f11"></label></li>
72        <li><label for="f12"></label></li>
73        <li><label for="f13"></label></li>
74        <li><label for="f14"></label></li>
75        <li><label for="f15"></label></li>
76        <li><label for="f16"></label></li>
77        <li><label for="f17"></label></li>
78        <li><label for="f18"></label></li>
79        <li><label for="f19"></label></li>
80        <li><label for="f20"></label></li>
81        <li><label for="f21"></label></li>
82        <li><label for="f22"></label></li>
83        <li><label for="f23"></label></li>
84        <li><label for="f24"></label></li>
85        <li><label for="f25"></label></li>
86        <li><label for="f26"></label></li>
87        <li><label for="f27"></label></li>
88        <li><label for="f28"></label></li>
89        <li><label for="f29"></label></li>
90        <li><label for="f30"></label></li>
91        <li><label for="f31"></label></li>
92        <li><label for="f32"></label></li>
93        <li><label for="f33"></label></li>
94        <li><label for="f34"></label></li>
95        <li><label for="f35"></label></li>
96        <li><label for="f36"></label></li>
97        <li><label for="f37"></label></li>
98        <li><label for="f38"></label></li>
99        <li><label for="f39"></label></li>
100        <li><label for="f40"></label></li>
101        <li><label for="f41"></label></li>
102        <li><label for="f42"></label></li>
103      </ul>
104      <label for="ff" class="verify_btn">I'm not a robot.</label>
105      <label for="ft" class="verify_btn">I'm not a robot.</label>
106    </div>
107    <input id="ff" type="checkbox">
108    <input id="ft" type="checkbox">
109    <div id="false" class="container result">
110      <div class="message">Result: False</div>
111    </div>
112    <div id="true" class="container result">
113      <div class="message">Result: True<br>True<br>True</div>
114    </div>
115  </body>
116
117</html>

css
1*,
2*::before,
3*::after{
4  font-weight: normal;
5  line-height: 1em;
6  padding:0;
7  margin: 0;
8  box-sizing: border-box;
9  -webkit-tap-highlight-color:rgba(0,0,0,.1);
10}
11html,body{
12  width: 100vw;
13  height: 100vh;
14  overflow: hidden;
15}
16html{
17  font: normal 17px / 17px sans-serif;
18  -webkit-text-size-adjust: 100%;
19}
20body{
21  position: absolute;
22}
23
24.container{
25  position: absolute;
26  top: 50%;
27  left: 50%;
28  transform: translate(-50%, -50%);
29  width: 350px;
30  max-width: 95vw;
31}
32.container::before{
33  content: "";
34  display: block;
35  padding-top: 85.7%;
36}
37
38#bg_wrapper{
39  display: flex;
40  flex-wrap: wrap;
41  justify-content: center;
42  align-content: center;
43  position: absolute;
44  width: 100%;
45  height: 100%;
46  top: 50%;
47  left: 50%;
48  transform: translate(-50%, -50%);
49  background: url(S__13533187.jpg) center center / contain no-repeat;
50  box-shadow: 0 0 0 1px cornflowerblue;
51  list-style: none;
52}
53li{
54  flex: 0 0 auto;
55  width: 14.2%;
56  height: 16.6%;
57  border: 1px solid white;
58  border-width: 0 1px 1px 0;
59  background: rgba(255, 255, 255, .5);/**/
60}
61li:nth-child(7n){
62  border-width: 0 0 1px 0;
63}
64li:nth-child(n+36){
65  border-width: 0 1px 0 0;
66}
67li:last-child{
68  border: none;
69}
70
71li:nth-child(13),
72li:nth-child(17){
73  background: yellow;
74}
75
76#f01:checked ~#captcha li:nth-child(1),
77#f02:checked ~#captcha li:nth-child(2),
78#f03:checked ~#captcha li:nth-child(3),
79#f04:checked ~#captcha li:nth-child(4),
80#f05:checked ~#captcha li:nth-child(5),
81#f06:checked ~#captcha li:nth-child(6),
82#f07:checked ~#captcha li:nth-child(7),
83#f08:checked ~#captcha li:nth-child(8),
84#f09:checked ~#captcha li:nth-child(9),
85#f10:checked ~#captcha li:nth-child(10),
86#f11:checked ~#captcha li:nth-child(11),
87#f12:checked ~#captcha li:nth-child(12),
88#f13:checked ~#captcha li:nth-child(13),
89#f14:checked ~#captcha li:nth-child(14),
90#f15:checked ~#captcha li:nth-child(15),
91#f16:checked ~#captcha li:nth-child(16),
92#f17:checked ~#captcha li:nth-child(17),
93#f18:checked ~#captcha li:nth-child(18),
94#f19:checked ~#captcha li:nth-child(19),
95#f20:checked ~#captcha li:nth-child(20),
96#f21:checked ~#captcha li:nth-child(21),
97#f22:checked ~#captcha li:nth-child(22),
98#f23:checked ~#captcha li:nth-child(23),
99#f24:checked ~#captcha li:nth-child(24),
100#f25:checked ~#captcha li:nth-child(25),
101#f26:checked ~#captcha li:nth-child(26),
102#f27:checked ~#captcha li:nth-child(27),
103#f28:checked ~#captcha li:nth-child(28),
104#f29:checked ~#captcha li:nth-child(29),
105#f30:checked ~#captcha li:nth-child(30),
106#f31:checked ~#captcha li:nth-child(31),
107#f32:checked ~#captcha li:nth-child(32),
108#f33:checked ~#captcha li:nth-child(33),
109#f34:checked ~#captcha li:nth-child(34),
110#f35:checked ~#captcha li:nth-child(35),
111#f36:checked ~#captcha li:nth-child(36),
112#f37:checked ~#captcha li:nth-child(37),
113#f38:checked ~#captcha li:nth-child(38),
114#f39:checked ~#captcha li:nth-child(39),
115#f40:checked ~#captcha li:nth-child(40),
116#f41:checked ~#captcha li:nth-child(41),
117#f42:checked ~#captcha li:nth-child(42){
118  background: skyblue;
119}
120
121label{
122  display: block;
123  width: 100%;
124  height: 100%;
125  user-select: none;
126  -ms-user-select: none;
127  -moz-user-select: none;
128  -webkit-user-select: none;
129}
130
131#disc{
132  position: absolute;
133  bottom: calc( 100% + .5rem);
134  display: block;
135  width: 100%;
136  padding: 1rem;
137  color: #fff;
138  background: cornflowerblue;
139  border-radius: .25rem;
140}
141
142.verify_btn{
143  position: absolute;
144  top: calc(100% + .5rem);
145  display: flex;
146  align-items: center;
147  justify-content: center;
148  height: 3rem;
149  text-align: center;
150  padding: 1rem;
151  border: 1px solid #aaa;
152  border-radius: .25rem;
153}
154.verify_btn::after{
155  content: "VERIFY";
156  display: inline-block;
157  color: #fff;
158  background: cornflowerblue;
159  border-radius: .25rem;
160  margin-left: 1rem;
161  padding: .5rem;
162}
163
164label[for="ft"]{
165  display: none;
166}
167#f13:checked
168~#f17:checked
169~#captcha >label[for="ft"]{
170  display: block;
171  outline: 1px solid red;
172}
173
174.result{
175  display: none;
176  background: rgba(0, 0, 0, .5);
177  opacity: 0;
178}
179#ft:checked ~#true.result,
180#ff:checked ~#false.result{
181  display: block;
182  opacity: 1;
183  transition-duration: 3s;
184}
185
186.message{
187  position: absolute;
188  top: 50%;
189  left: 50%;
190  transform: translate(-50%, -50%);
191  width: 90%;
192  height: 90%;
193  background: #fff;
194  padding: 1rem;
195  text-align: center;
196}

TL;DR

position:absolute;を指定した2つの要素を重ねる際，内包要素が上下左右にズレないようにしたい
たぶん仕様っぽい雰囲気（何かを見落としている？
absoluteした要素がズレる現象は初めて見たので，どうやったら回避できるのか見当がつかない

--> お助けよろしくお願いいたします！ > <

行動規範の内容に同意します

回答1件

ベストアンサー

ずれる原因ですが、
2つめのテキストとボタンが表示されるときにdisplay: block;が優先されていることで
display: flex;が上書きされています。
そのことが原因で後述のalign-itemsが効かないのでずれた様に見えています。
ですのでテキストを縦方向中央にするときは別の方法で実現する必要があります。
箱の縦幅が48pxで固定の場合はpadding: 1rem;を削除してline-height: 48px;でも縦方向中央に揃えることは可能です。

lang=css
1position: absolute;
2top: calc(100% + .5rem);
3display: flex; // ← ここが上書きされている
4align-items: center;
5justify-content: center;
6height: 3rem;
7text-align: center;
8padding: 1rem;
9border: 1px solid #aaa;
10border-radius: .25rem;