title: Why does my HTML DIV push content in when invisible, rather than display above and obscure the other content when visible?
body: <p>I'm trying to, using only HTML and CSS (<em>no Javascript</em>), when the user hovers over an element (a <code>&lt;div&gt;</code>), display another (<code>&lt;div&gt;</code>) element.</p>
  
  <p>My desired result is this: The second element (div#hover-content, in my case) should be displayed above the content which is outside of the two divs, obscuring the content that happens to be placed "below" it, and should remain visible until the user moves the mouse pointer outside the two. (I can put that content into a third div if that makes it easier.) The page content must not reflow when the hiding/showing happens. I don't know at design time what the exact positions of the two will be, but I do know that they will be adjacent.</p>
  
  <p>I have been experimenting with <code>float</code>, <code>clear</code>, <code>visibility</code> and <code>z-index</code> which, if I understand things correctly, <em>should</em> be what I am after, but I can't seem to get the effect I want.</p>
  
  <p>Below is a minimal working example largely demonstrating the behavior I <em>don't</em> want. Currently the content outside the hover box is pushed in from the left by div#hover-content even when that has visibility:hidden.</p>
  
  <p>If anyone can point out the error of my ways and suggest a solution, I would be very grateful.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  #hover-target, #hover-content { max-width: 20em; }
  #hover-target:hover ~ #hover-content, #hover-content:hover { visibility: visible; opacity: 1; }
  #hover-content, #hover-content p { margin: 0; padding: 0; border: 0; }
  #hover-content { visibility: hidden; float: left; white-space: no-wrap; background: grey; outline: 1px red solid; z-index: -40; }
  #hover-content p { margin-bottom: 1em; color: yellow; }
  body p { margin-left: 2em; max-width: 50em; z-index: 1; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="hover-target"&gt;HOVER HERE&lt;/div&gt;
  &lt;div id="hover-content"&gt;
  &lt;p&gt;This is hover box content. It should appear on top of Lorem ipsum, obfuscating the latter.&lt;/p&gt;
  &lt;p&gt;Blah blah blah&lt;/p&gt;
  &lt;p&gt;Blah blah blah #2&lt;/p&gt;
  &lt;p&gt;Blah blah blah #3&lt;/p&gt;
  &lt;p&gt;Blah blah blah #4&lt;/p&gt;
  &lt;p&gt;It should be width-constrained, but not push Lorem ipsum to the right whether the hover box is visible or not.&lt;/p&gt;
  &lt;p&gt;The exact positions of the hover target and the hover box are unknown at design time.&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- I can easily introduce another DIV here surrounding the below, if it helps --&gt;
  &lt;!-- div ... --&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.&lt;/p&gt;
  &lt;!-- /div --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>