Can position:absolute elements somehow poke out of overflow:hidden containers?

I suspect the answer's a pretty definite no, but given the following html and css, is there some tweak (without editing the html) I can do to get absolutely positioned "thing" to show up, while keeping other overflowing content hidden.

<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 w开发者_C百科ords. 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;
}

No, you would have to set the height / width to the contents instead of the .wrap element itself. A solution would be an inner div next to .thing.

If you don't mind a bit of Javascript, it is possible to do without altering the structure of the HTML at all. It works by setting position: fixed; top: auto; left: auto; on thing and then adjusting thing's position when the page is scrolled - I do so through the margin-top css property.

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

One issue is that every ancestor of thing must have the scroll event manually bound to it since that event doesn't bubble up the chain.

Edit A draw-back is that the thing can be cut-off if it extends past the bottom of the body because fixed elements cannot make their parents any bigger

You could have an inner wrapper div around the <p> tag, 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> tag instead I guess, if there was only going to be the one <p>)

Answer: Yes.

It is possible to do it without Javascript and without moving any HTML.

Setup a parent Div and give it the same height values as '.wrap':

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

Then give the '.wrap' a larger width

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

Please see my live example: http://jsfiddle.net/7o1e0ga0/2/