In normal flow, inline boxes flow from left to right, wrapping to next line when needed.
<img src="img/cookie1.png"/>
<img src="img/cookie2.png"/>
<img src="img/cookie3.png"/>
...
<img src="img/cookie2.png"/>
<img src="img/cookie3.png"/>
In normal flow, block boxes flow from top to bottom, making a new line after every box.
<p>Greetings</p>
<p>Hello</p>
<p>Hi there!</p>
Greetings
Hello
Hi there!
The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.
.relative{
position: relative;
left: 80px;
top: 20px;
height: 100px;
background-color: yellow;
}
The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).
.top{
position: absolute;
top: -40px;
right: 10px;
background-color: yellow
}
.bottom{
position: absolute;
bottom: -40px;
left:60px;
background-color: green
}
Here's an example of an image with a caption absolutely positioned over top of it.
The containing div has a position of relative, and the caption has a position of absolute.
Sometimes elements overlap. You can change the order of overlapping with z-index. The element with highest z-index goes on top.
.bottom{
position: absolute;
bottom: 10px;
left:60px;
background-color: yellow;
}
.top{
position: absolute;
bottom: 15px;
left:60px;
background-color: green;
z-index: 2;
}
Let's add some positioning.
Let's create a div that contains an image and a caption, and position the caption absolutely overtop the image.
Below a <blockquote> is floated to the left, allowing text to wrap around it on the right
.float{
float:left;
width:200px;
background:yellow;
}
If you want two block level elements to be side by side, you need to float both elements. One left, and one right.
width: 300px;
float: left;
width: 400px;
float: right;
clear: right;
clear: left;
clear: both;
.float{
float:left;
width:50px;
background:yellow;
}
.clear-left{
clear:left
}
Let's float our side bar and content areas.