Menu
Please consider this example: (working example)
Style declarations:
body {background:#333;font:1em Arial, Helvetica, sans-serif;}
h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}
h2 {font-weight:normal;font-size:1.15em;
padding-bottom:5px;border-bottom:1px solid #999;}
p {padding-right:1em;color:#000;}
pre {font-size:1em;color:#06f;margin:1em 0;}
#wrapper {position:absolute;width:100px;height:100px;background:#ececec;
overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;
border-right:1px solid #000;border-top:1px solid #fff;
border-left:1px solid #fff;}
.css {float:right;width:50%;}
.markup {float:left;width:50%;margin-right:-1px;}
.box1,
.box2,
.box3,
.box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}
.box1 {left:0;top:-20px;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:-20px;bottom:-20px;}
Markup:
<body>
<h1>overflow:hidden and absolutely positioned elements</h1>
<div id="wrapper">
<div class="markup">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
</div>
</body>
As you can see, Box1 and Box4 are clipped. How can I make them visible outside the containing divs' borders? Basically the boxes should be displayed like tooltips (they must be the topmost elements on the page).
Criteria regarding the preferred solution:
wrapper must remain
absolutely positioned and must remain overflow:hidden
Edit: I know that my requirements are tough, but I have to work with them. I have to solve this task in an enviroment I have no absolute control over.
Edit #2: Okay, here is WHY I need the boxes to not be relocated in the markup. In the concrete situation I want to use them as tooltips (specifically BeautyTips) for other elements. The position of the tooltip in the DOM tree is the result of the internal workings of the library. When I wanted to use BeautyTips, the problem that can be seen in my example prevented the display of the whole tooltip: it was clipped.
491
What you are trying to do is not possible with the conditions you have set. By definition, overflow:hidden clips any content or content within a descendant element that extends outside the viewport of the parent element.
The only way you are going to make it work is to either remove overflow:hidden or move the clipped boxes outside the wrapper.
http://www.w3.org/TR/CSS21/visufx.html
133
Well, your box #wrapper is the first non-default positioned ancestor and so forms the bounding box for box1 to box4. And since you've set #wrapper to overflow: hidden it is hiding the parts of box1 to box4 that overlap its edge.
You could remove overflow: hidden from #wrapper, or you could move these boxes outside #wrapper.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
