CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
I have 3 levels of div:
-
(In green below) A top level
divwithoverflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box. -
(In red below) Inside this, I have
divwithposition: relative. The only use for this is for the next level. -
(In blue below) Finally a
divI take out of the flow withposition: absolutebut that I want positioned relative to the reddiv(not to the page).
I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:
However, with the code below, I get:
And removing the position: relative on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:
Is there a way to:
- Keep the
overflow: hiddenon the green box. - Have the blue box expand beyond the green box and be positioned relative to red box?
The full source:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>Solution 1:
A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:
And here is the full code with this change:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Positioning */
#box1 { overflow: hidden }
#box2 { position: absolute }
#box3 { position: absolute; top: 10px }
/* Styling */
#box1 { background: #efe; padding: 5px; width: 125px }
#box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
#box3 { background: #eef; padding: 2px; width: 75px; height: 150px }
</style>
</head>
<body>
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
</body>
</html>
Solution 2:
There's no magical solution of displaying something outside an overflow hidden container.
A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container (the div you don't wish to clip should be outside this div):
#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
Take in mind that if you only have to clip content on the x axis (which appears to be your case, as you only have set the div's width), you can use overflow-x: hidden.