Position

{ position: }

Elements can be contained or "nested" within other elements. The containing element is called the parent and any element contained within, is called a child. The position and size of a child element depends on its parent element. With relative position the parent and child have to respect the space taken up by each other's content. With absolute position the space taken up by content is ignored. Notice, the width of the child is set to 70%. This is displayed as 70% of the parent container, not 70% of the page. Play around with the position property for both the parent and child div to see the effect.

Parent

Child

HTML

<div id='parent' >Parent

<div id='child'>Child</div>

</div>

CSS

#parent {

position:

;

top: 100px

;

left: 100px

;

}

#child {

position:

;

top: 0

;

width: 70%

;

}

Images and paragraphs (as well as other elements) can be nested within a div. (Elements other than div's can be containers, but div's are the most common) You can have multiple children nested within a parent. And child elements can contain other elements and become parents themselves. If you notice in the html code, the child element is indented. This isn't required, but it is standard practice to indent child elements, as it makes it more readable.