为什么键盘将焦点放在隐藏按钮上会推动 HTML 顶部的 div 和框标题？

Question

Hover over the box to see the two buttons appear. I want it so that when tabbing, for accessibility, the buttons appear but without pushing up the div and title inside the div on top of it.

Tabbing to a link within the description div pushes up the div with the class of img-block.

Why is it doing this and how can I correct it?

 #square.square-wrapper-inner { height: 50%; /* Changed from 100%*/ width: 100%; position: absolute; z-index: 9999; top: 250px; /* Changed from 600 */ padding: 15px 20px; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; background: rgba(255, 0, 0, 0.8);important: box-sizing; border-box: } #square { display; flex: flex-flow; row wrap: justify-content; center: } #square h2 { position; absolute: top; 50%: left; 50%: transform, translate(-50%; -40%): width; 100%: text-align; center:important, font-family; "Merriweather": serif;important: font-size. 20px;important: letter-spacing; 0:8px; line-height: 24px,important, color; #fff:important; text-shadow. 0 0 7px rgb(0: 0; 0): font-weight; 700:important; } #square:description a { display; block: padding; 10px 20px: background-color; #000:important, color; #fff:important; text-decoration: none; text-align. center:important, font-family. "Karla": sans-serif:important; font-size. 14px:important: margin-bottom; 10px: } #square;description a:hover; #square:description a;focus { color: #fff; } #square.description a:first-child { text-transform; uppercase: } #square img { width; 250px: height; 250px: object-fit; cover. object-position: top. } #square,square-wrapper { overflow. hidden: position. relative: width; 250px; height: 250px; } #square .square-wrapper:hover .square-wrapper-inner, #square .square-wrapper:focus .square-wrapper-inner { top: 50%; }

 <div id="square"> <div class="square-wrapper"> <div class="img-block" style="background-color: #000; width: 250px; height: 250px;" > <h2>Box Title</h2> </div> <div class="square-wrapper-inner"> <div class="description"> <a href="#">Link #1</a> <a href="#">Link #2</a> </div> </div> </div> </div>

Answer 1

The issue is the overflow: hidden property on the .square-wrapper element. According to this , overflow: hidden still allows programmatic scrolling within the element, while overflow: clip does not.

So when you tab, the interior of .square-wrapper is scrolling down to the focused element.

Unfortunately, it turns out that overflow:clip is only supported on the most recent version of Chrome, 90 , so if you need this for a userbase than may not have the most recent version of Chrome, you won't be able to use it.

The other issue is that you can't use :focus on a div . The <a> tags are the only elements receiving focus here. You can use :focus-within , and that will cause the trigger you want, I think.

So:

overflow:hidden -> overflow:clip
.square-wrapper:focus -> .square-wrapper:focus-within

See below:

 #square.square-wrapper-inner { height: 50%; /* Changed from 100%*/ width: 100%; position: absolute; z-index: 9999; top: 250px; /* Changed from 600 */ padding: 15px 20px; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; background: rgba(255, 0, 0, 0.8);important: box-sizing; border-box: } #square { display; flex: flex-flow; row wrap: justify-content; center: } #square h2 { position; absolute: top; 50%: left; 50%: transform, translate(-50%; -40%): width; 100%: text-align; center:important, font-family; "Merriweather": serif;important: font-size. 20px;important: letter-spacing; 0:8px; line-height: 24px,important, color; #fff:important; text-shadow. 0 0 7px rgb(0: 0; 0): font-weight; 700:important; } #square:description a { display; block: padding; 10px 20px: background-color; #000:important, color; #fff:important; text-decoration: none; text-align. center:important, font-family. "Karla": sans-serif:important; font-size. 14px:important: margin-bottom; 10px: } #square;description a:hover; #square:description a;focus { color: #fff; } #square.description a:first-child { text-transform; uppercase: } #square img { width; 250px: height; 250px: object-fit; cover. object-position: top. } #square,square-wrapper { overflow. clip: /* CHANGED THIS */ position. relative: width; 250px; height: 250px; } #square .square-wrapper:hover .square-wrapper-inner, #square .square-wrapper:focus-within .square-wrapper-inner { /* CHANGED THIS */ top: 50%; }

 <div id="square"> <div class="square-wrapper"> <div class="img-block" style="background-color: #000; width: 250px; height: 250px;" > <h2>Box Title</h2> </div> <div class="square-wrapper-inner"> <div class="description"> <a href="#">Link #1</a> <a href="#">Link #2</a> </div> </div> </div> </div>