Position a div relative to a top-level container?
- by Seifeddine Dridi
I'm trying to model an HTML document which only contains div elements positioned in absolute. For each div, properties left and top are precalculated wrt. the top-level div, but a problem occurs with nested divs since according to the CSS standard an element is positioned relative to its first ancestral element whose positioning is either relative or absolute.
Does anyone know any workaround?
EDIT: small code snippet that demonstrates the problem
<html>
<body style="background-color: #444444">
<div style="position: relative; background-color: white;">
<div style="position: absolute; background-color: red; width: 4cm;
height: 3cm; top: 1cm">div 1
<div style="position: absolute; background-color: green; top: 4cm">
div 1.1</div>
</div>
</div>
</body>
</html>
The green div is expected to be positioned right after the red div, instead there is a gap of 1cm in between.
