Problem postioning as absolute element inside another element

HTML & CSS
1

In the following html page, I would like the black box (#popup) to show up in an absolute position in the yellow box (#innerwhole). I want to maintain the positioning of the #box so it floats in the middle as you widen the browser.

So I am giving it position: absolute so it will go out of flow and sit on top of the other content in #innerwhole, but how do I get it positioned relative to #innerwhole?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
<style type=“text/css” media=“all”>

  • {margin 2px; padding: o;}
    #box {overflow: hidden; width: 750px; margin: 1px auto; border: 1px solid red;}
    #header {font-weight: bold; border: 1px solid blue;}
    #container {clear: both; overflow: hidden; border: 1px solid green;}
    #innerwhole {float: left; width: 500px; border: 1px solid purple; background-color: yellow; top: 10px; left: 20px;}
    #right-bar {display: block; float: right; overflow: hidden; background-color: blue; width: 220px; margin: 0; padding: 0; border: 1px solid yellow;}
    #popup {position: absolute; top: 10px; left: 20px; width: 150px; height: 200px; background-color: black; z-index: 10;}
    </style>
    </head>

<body>
<div id=“box”>
<div id=“header”>header
</div>
<div id=“container”>
<div id=“popup”></div>
<div id=“innerwhole”>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
inner whole<br>
</div>
<div id=“right-bar”>right box</div>
</div>
<div id=“footer”>footer</div>
</div>
</body>
</html>

2

Hi,
you’re code’s not too hard to read, but in the future, wrap your code in

 tags.

Anyway:

> 
So I am giving it position: absolute so it will go out of flow and sit on top of the other content in #innerwhole, but how do I get it positioned relative to #innerwhole?

Well, with your current markup, you can't (at least not easily).  You'll want to move <popup> to inside <innerwhole>, so that <innerwhole> is a [i]parent[/i] of <popup>.

Right now, you've got position: absolute set on <popup>, and unless I missed something (maybe, I'm lazy AND I have bad eyes : ) you don't have positioning on anything else.  So here's what the browser does.

Position: absolute elements set their coordinates (if no coordinates, they default to 0, 0) based on their [i]nearest positioned ancestor[/i].  That would be any parent, grandparent, great-grandparent.... etc box who is [i]positioned[/i] (having either position: relative or position: absolute... maybe also even position: fixed).  If there is no positioned ancestor (I think I don't see one in your code), then the abso-po'd element uses the viewport as its reference.

So if you put <popup> inside <innerwhole>, you can do this:

#innerwhole {
position: relative;
rest of styles, and no coordinates!
}

#popup {
position: absolute;
now, any coordinates you set will be based on #innerwhole’s dimensions and position on the page
}




So we're only setting position: relative on &lt;innerwhole&gt; to make it a [i]positioned ancestor[/i] for &lt;popup&gt;, not because we want to position it anywhere.

If changing the HTML order is out of the question, then the best you can do is set position: relative on its current parent (&lt;container&gt;) and try to set coords that kinda sorta match &lt;innerwhole&gt; as much as possible.  But that's not as nice.
3

Thanks, works great. I could swear I tried that but since it’s no longer in debate whether I’m losing my mind, but merely a question of how fast… :slight_smile:

Thanks for the help.

4

since it’s no longer in debate whether I’m losing my mind, but merely a question of how fast…

Markup will hasten that, just so you know.

Here’s how I ended up: http://pixar.wikia.com/File:47482_435928584077_35245929077_4810647_6736973_n.jpg