Position a div relative to a top-level container?
Posted
by
Seifeddine Dridi
on Stack Overflow
See other posts from Stack Overflow
or by Seifeddine Dridi
Published on 2014-06-04T15:02:46Z
Indexed on
2014/06/04
15:25 UTC
Read the original article
Hit count: 115
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.
© Stack Overflow or respective owner
