Forum Moderators: not2easy
I understand that something that is absolutely positioned is placed according to it's parent. So say I wanted a relatively positioned element, then position something absolutely to that relative positioned element. How would I write the CSS? Because I still can't grasp quite yet how you write the CSS so that one element is the parent of another when it comes to positioning...
Or I may just be way off totally, I hope someone can help :\
<div> <!-- this is the parent container -->
<div> <!-- this is a child of the above parent -->
<div> <!-- this is a child of the above and a grandchild of the topmost parent -->
</div>
</div>
</div>
if i understand it correctly, the above is representative of the parent child relationship...
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}#navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
#navBeta {
position:absolute;
width:190px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
#navAlpha and #navBeta are menu elements fixed on the left and right, while .content is a center element. They line up perfectly and evenly, but when I search through the coding, I don't understand how it's done. And here's how he lays out his HTML...
<div class="content">
</div><div class="content">
</div>
<div class="content">
</div>
<div id="navAlpha">
</div>
<div id="navBeta">
</div>
I'm so confused! :b
Imagine your web page as a clean sheet of paper. The only things that you can put on that Web page are boxes. The box might be a paragraph, a headline, a division (div), a blockquote or a list- they are really just boxes at the end of the day. Just like a shipping house has to stack, order and place boxes relative to each other- so do we. There may be a time when we have a small box that needs to be placed in a bigger box to save room. At that point, the smaller box becomes the child and the bigger box becomes the parent.
So at Blue Robot. You see that the two 'nav' boxes are given an absolute definition. This means they are given their own shelf in the warehouse. They are removed from the normal order and flow of the warehouse floor. Look at their widths and position in particular- one box is set to the right and given a particular width. The other is set to the left and given a particular width. They are absolute and are no longer in the flow of the normal document. If you typed out some text below the <body> tag of your page, it would be put behind the left box like you were starting from scratch with nothing on the page because they are removed so to speak.
So position absolute put them there. Now look at the .content box. It is in the normal flow of the page, the only reason it sits between the two absolutely positioned 'nav' divs are because of its margin settings. The margin settings are 20 pixels more than the widths of the two absolutely positioned boxes.
Does that make a little more sense?
One more question if you all don't mind... How would you go about placing an absolute positioned element on a page with a relative positioned parent? Or is it not possible?
Would I go about doing this by placing the HTML code inside it's parent?
I.E.
<div class="Content">
<div class="Subcontent">
</div>
</div>
