I have a strange problem today, in Chrome, when I focus on an element that is absolutely positioned out of its overflow hidden container, it gets visible in Chrome browser (Mac).
I've made a fiddle to illustrate the problem : http://jsfiddle.net/GHgtc/
Html
<div id="container">
<a id="inner-button" href="#">You can see me !</a>
</div>
Css
#container{
display: block;
background: blue;
width: 200px;
height: 30px;
position: relative;
overflow: hidden;
}
#inner-button{
display: block;
background: red;
width: 20px;
height: 20px;
position: absolute;
top: 5px;
right: -20px;
}
Thanks for your help !
Cheers !
To disable focus on a specific element, set the tabIndex property on the element to a value of -1 . The tabIndex property can be used to specify that an element cannot be focused using keyboard navigation. Here is the HTML for the examples in this article. Copied!
To both hide an element and remove it from the document layout, set the display property to none instead of using visibility .
Hit F8 . Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
There's a powerful tool concealed in your browser called Inspect Element. Right-click on any webpage, click Inspect, and you can see the structure of that site: its source code, pictures, CSS, fonts and icons, Javascript code, and more. You can also access this tool by pressing Ctrl+Shift+I (For Mac, Cmd+Option+I).
Use tabindex="-1" on your "inner-button". That will prevent focus. http://jsfiddle.net/GHgtc/2/
<input placeholder="focus on me then press tab" type="text">
<div id="container">
<a id="inner-button" tabindex="-1" href="#">You can see me !</a>
</div>
UPDATE:
I realized there is another possible solution to your issue while working on some focus issue of my own. You can use z-index:-1 if the focus you need is to be triggered later via javascript event.
#inner-button{
display: block;
background: red;
width: 20px;
height: 20px;
position: absolute;
top: 5px;
right: -20px;
z-index:-1;
}
http://jsfiddle.net/GHgtc/3/
That will keep it focusable but hidden. And you can make it visible back with z-index:0 dynamically.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With