Maybe the situation: absolute elements somehow crack out of overflow: hidden containers?

Question

I suspect the answer is pretty definitely not, but given the following html and css, is there some kind of setting (without html editing) that I can do to get an absolutely positioned “thing” to display while maintaining other overflowing content .

<div class="wrap"> <p>Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. </p> <div class="thing">thing</div> </div> .wrap { width: 100px; height: 100px; overflow:hidden; position:relative; } .thing { position:absolute; top: -3px; right: -10px; } 

Answer 1

No, you will need to set the height / width for the content instead of the .wrap element itself. The solution is the inner div next to .thing .

Answer 2

If you don't mind a bit of Javascript, you can do without changing the HTML structure at all. It works by setting position: fixed; top: auto; left: auto; position: fixed; top: auto; left: auto; on thing , and then adjusting the position of the thing when scrolling the page - I do this through the css margin-top css property.

Example: http://jsfiddle.net/sparebytes/zxwL8/

One problem is that each ancestor of a thing must have a scroll event associated with it, since this event does not create a bubble chain.

Edit Rollback is something that can be disabled if it passes by the bottom of the body , because fixed elements cannot make their parents bigger

Answer 3

You can have an inner div wrapper around the <p> , and then duplicate the .wrap rules:

 .innerwrapper { width: 100px; height: 100px; overflow:hidden; position:relative; } 

Then remove overflow:hidden from .wrap .

(You could also add these rules to the <p> , instead, I think if there was only one <p> )

Answer 4

Answer: Yes.

This can be done without Javascript and without moving HTML.

Set the parent Div and give it the same height values ​​as ".wrap":

 <div class="parent_wrap" style="width: 100px; height: 100px; "> 

Then give ".wrap" a large width

 <div class="wrap" style="width: 999px;"> 

Check out my live example: http://jsfiddle.net/7o1e0ga0/2/