All geek questions in one place

How to create an absolutely positioned (crowded: hidden) container absolutely positioned children show outside their parent area?

Please consider this example: ( working example )

Style Declaration:

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 cropped. How can I make them visible outside the borders of existing divs? Basically, boxes should appear as tooltips (they should be the topmost elements on the page).

Criteria regarding the preferred solution:

  • no markup changes
  • don't use CSS3
  • cross browser works
  • div with id wrapper should remain absolutely positioned and should remain overflow:hidden

Edit: I know my requirements are tough, but I have to work with them. I have to solve this problem in an environment in which I cannot control.

Edit # 2: Okay, here's WHY I need boxes to not move into the layout. In a specific situation, I want to use them as hints (in particular, BeautyTips) for other elements. The tooltip position in the DOM tree is the result of the library’s internal work. When I wanted to use BeautyTips, a problem that could be seen in my example prevented the entire tooltip from being displayed: it was cropped.

+4
source share
3 answers

What you are trying to do is impossible with the conditions that you set. By definition, overflow: hides clips of any content or content within a descendant element that falls outside the viewport of the parent element.

The only way you are going to make it work is to either remove the overflow: hide or move the clipped fields outside the shell.

http://www.w3.org/TR/CSS21/visufx.html

+6
source

Well, your #wrapper box is the first non-default positioned ancestor and therefore forms a bounding box for box1 to box4 . And since you set #wrapper to overflow: hidden , it hides the parts of box1 to box4 that overlap its edge.

You can remove overflow: hidden from #wrapper , or you can move these fields outside of #wrapper .

+2
source

Remove overflow:hidden from wrapper and do it.

0
source

Source: https://habr.com/ru/post/1338320/

More articles:


All Articles