The position:absolute page screw up

When you absolutely position something relative to another element, you may notice that your absolutely positioned element will disappear or render in an odd fashion. This will likely be because of the following reasons:

• Your absolutely positioned elements are empty and have no dimensions
• Your absolutely positioned elements are obscured by other elements
• Your absolutely positioned elements are positioned off screen
• You haven't given your relatively positioned element a definite height

Hidden Elements

The way to check whether or not your absolutely positioned element is actually being obscured by another element, is to give it a high z-index value; if it has already been assigned a z-index, check that this isn't lower than the z-index of another object that may be overlapping it.

Elements off screen

If your elements are likely positioned off-screen, again, it's an easy fix. Check the directional values assigned to them (top, right, bottom, left). If they obviously look wrong, or are minus numbers, you've found the problem. If you can't tell whether the figure is too big or too small, set all the direction properties assigned to that element to zero, and make sure it doesn't have a z-index lower than the z-index applied to any neighbouring elements that may be overlapping it. That should sort out the problem.

Relatively positioned element has no height

If your relatively positioned element contains absolutely positioned elements, it must have a definite height — which means a height in length vales such as pixels or ems. Setting height:100% or height:auto will not work. The reason for this is because, when something is given absolute positioning, the relatively positioned element which constrains it cannot automatically work out its height, because absolutely positioned elements aren't part of the flow of the page. The result is that the relatively positioned element thinks there is nothing inside it, and renders accordingly.

When you use a length value as the height, you are setting the height independently regardless of whatever is inside the element.

What about overflow:auto?

Given we're not dealing with elements that are part of the flow of the page, nor are we dealing with percentage or automatic heights, overflow:auto is out as a solution to stretching the relatively positioned element to accommodate its contents. Why? Because 1) overflow:auto won't detect absolutely positioned elements, and 2) in order for it to stretch an element to accommodate what is inside it, overflow:auto must be combined with either no height, height:auto (which is the same thing) or height:100% — which obviously we can't do.

Example with issue

Here's the problem in action, which heralds odd results.

CSS Code:

          
#relativeEx1a {
	position:relative;                
	background-color:#CCF;
	border:1px solid #C6C;
}
        
#abs1Ex1a, #abs2Ex1a {
	position:absolute;
	width:180px;
	height:180px;	
}
        
#abs1Ex1a {
	bottom:0;
	background:orange;	
}
        
#abs2Ex1a {
	right:0;	
	background:blue;
}
        

(X)HTML Code:

           
<div id="relativeEx1a">
	<div id="abs1Ex1a"></div>
	<div id="abs2Ex1a"></div>
</div>                     
		

Result:

Because of how screwed up this particular issue is, I've included the result on a new page, which can be viewed here.

Here, we have a div called relativeEx1a which is relatively positioned and has a purple background colour and a pink border. Inside relativeEx1a are two absolutely positioned elements, and underneath relativeEx1a is some demonstration text.

What do we see? relativeEx1a is barely visible — literally a thin strip across the screen — and the left image is clipped, whilst the right image overlaps the demonstration text.

Example that works

Here's that same example above, but with a definite height of 230px applied to the relatively positioned div, which is called relativeEx1b in this example.

CSS Code:

          
#relativeEx1b {
	position:relative;                
	background-color:#CCF;
	border:1px solid #C6C;
	height:230px;
}
        
#abs1Ex1b, #abs2Ex1b {
	position:absolute;	
	width:180px;
	height:180px;
}
        
#abs1Ex1b {
	bottom:0;	
	background:orange;
}
        
#abs2Ex1b {
	right:0;	
	background:blue;
}
        

(X)HTML Code:

           
 <div id="relativeEx1b">
	<div id="abs1Ex1b"></div>
	<div id="abs2Ex1b"></div>
</div>                     
		

Result:

All that we did in the above example was apply a height of 230px to the relatively positioned element. This gave it a definite height, independent of its contents, and thus displayed our absolutely positioned elements inside.

Conclusion

The moral of this story is: if your element is relatively positioned and contains absolutely positioned elements, it must have a definite height, to avoid overlapping, clipping or vanishing issues. And that's it, really. It's a rather short moral.