Geek asks and answers

How to prevent a hidden item from appearing when working in Chrome?

I have a strange problem today in Chrome, when I focus on an element that is absolutely placed from a hidden overflow container, it becomes visible in the Chrome browser (Mac).

I 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;
}

Thank you for your help!

Greetings!

+5
source share
1 answer

Use tabindex = "- 1" on your "internal button". This 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:

, . z-index: -1, , , javascript.

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
    z-index:-1;
}

http://jsfiddle.net/GHgtc/3/

, . z-index: 0 .

+2

More articles:


All Articles