A basic positioning question

HTML & CSS
1

This is perhaps a very basic positioning question. However, I know little about what I am trying to achieve. I would appreciate it very much, if someone could provide me a solution and a bit of explanation.

I have an outer DIV, and 3 inner divs. I would like to position one of the divs ‘relative to’ the outer div at any arbitrary position within the outer div. My goal is to take this particular div out of the normal HTML flow and use z-Index to superimpose the div on the rest of the divs.

When a use absolute position, this does not happen. I read somewhere that the absolute position is relative to closest ‘positioned’ ancestor and relative positioning will be relative to the where the element would have normally been placed.

I do not have the option of applying any positioning to the outer div. How can I achieve what I have described. I have given sample HTML where I tried absolute positioning.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
</head>
<body>
<div style="margin: auto;padding:10px;border: 1px solid gray; width: 500px; height: 200px;">
    <div style="float: left;border: 1px solid;height: 100px;width: 100px;margin-right: 10px;">Div 1</div>
    <div style="height: 50px; width: 50px; background: yellow; position: absolute; left: 100px; top: 10px;">Div 2 </div>
    <div style="float: left;border: 1px solid;height: 100px;width: 100px;">Div 3</div>
    <br style="clear: both;" />
</div>
</body>
</html>

Thank you for your help.

2

Give the containing div {position: relative;}. That creates a positioned ancestor, yet leaves it in the flow. The AP element will take its position relative to the containing box.

cheers,

gary

3

Thank you.