Chrome and Firefox overflow:hidden jumping elements

问题

I stumbled over a strange behaviour that occurs in Chrome and Firefox when you have got an element with "position:relative;" and "overflow:hidden;" and an anchor in it with "position:absolute;".

Whenever the anchor gets focus the element above it magically jumps to the top, even though its styles and markup tell a different story.

Example: http://codepen.io/mediadivisiongmbh/pen/pJWmxp

All you need is a setup similar to this:

HTML

<div class="container">
  <h1>I can fly</h1>
  <a class="focus-me" href="#">Evil Link</a>
</div>

CSS

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
}

Thanks for your answers so far. In order to clarify the issue please take a look at this example:

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

When you hover over the container, the absolute positioned element containing the anchor will transition in view. When you click on it a lightbox (in this case Magnific Popup) is opened. After you close this lightbox the anchor gets focus again and jumps into view, which looks pretty odd.

Setting the anchor to display:none by default and display:block when hovering over the container worked for solving this issue.

回答1:

After more research I figured out that the problem is caused by an accessibility feature in chrome.

In my case I just needed to make sure the anchor tag is only accessible while hovering over the container element.

Therefore the solution was altering the CSS like this:

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
    display:none;
}

.container:hover .focus-me {
    display:inline-block;
}

回答2:

I'm not pretty clear about what you're looking for since you have different story. But if you mean you want to prevent jump because of focus on your link, you can use tabindex="-1" on your link to makes it not accepting tab stop. Check the Updated Pen

EDIT

Well when seeing your pen, I think you need to set display: none to your evil link and set it to display: inline-block when hovering to your container. Check Updated Pen.

来源：https://stackoverflow.com/questions/30979812/chrome-and-firefox-overflowhidden-jumping-elements

标签

css

google-chrome

firefox

overflow

css-position