Incredibly strange floating behavior

问题

You're going to have to take a look at the Fiddle for this one

The element I'm having trouble with, hoverHelper, is purposed to show next no matter what part of the body is hovered but only after the animation completes

When the animation ends, the floated (to take it out of the element flow) transparent overlay hoverHelper is given an absurdly high width and height to cover the entire page in order to apply a hover event to display the element next.

My problem, in essence, is that when the floated element is hovered, it registers the hover and acts as it should, but the other elements are negatively affected. For some reason the browser makes all following elements treat it like an un-floated element even though it never loses float:left. This means that the anchor and other succeeding elements are pushed thousands of pixels down, which is unacceptable

The easiest way to see this behavior is to inspect the element and force :hover on actualHover. Then you will see how it treats the floated hoverHelper like an un-floated element

Following is my HTML and relevant CSS

<div id='hoverHelper'></div>
<div id='actualHover'></div>
<a href="#" id='next'>Next</a>
<div class='other'></div>

body { overflow:hidden; max-width:200px; max-height:200px;}
#hoverHelper {
    width:0px;
    height:0px;
    z-index:1;
    position:relative;
    float:left;
    margin-top:-1000px;
    margin-left:-1000px;
    animation: hhAnimation .001s 3s forwards;
}
#actualHover {
    width:50px;
    height:50px;
    background:teal;
    animation: yourAnimation 3s linear forwards;
}
#next {
    z-index:2;
    display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
    display:inline-block;
}

Also, I originally was using position:absolute on the overlay, but that prevented the next button from being clicked which is also unacceptable

I realize what I'm doing is unconventional, but to me this makes complete sense. Any insight as to what's going on?

NOTE:

This question was solved by way of an alternate solution, not of the problem being found. We still have no idea why the floated element has the behavior it does

回答1:

As opposed to removing the element from the flow via floats, use position:absolute.

You said this was causing issues with #next, however if you add something like position:relative to it, it will be clickable. A z-index only has effect on positioned elements.

Working jsFiddle here - Added a semi-transparent background to the helperhover to demonstrate it.

来源：https://stackoverflow.com/questions/19458166/incredibly-strange-floating-behavior