Fancy div arranging
If you’re new to designing with CSS layout, it’s simple to get started with these six positioning properties:
- z-index
- position
- float
- clear
- top
- left
There are more positioning properties, but we’ll begin with these most practical ones.
To begin, here are two divs with very simple CSS rules. None of the special positioning properties have been applied yet (click on this image or any image below to view the live page.) We’ll call these the “simple” divs.
CSS divs with no special positioning
We’re using simple HTML too:
<body>
<div id=”box1″>
[text]
</div>
<div id=”box2″>
[text]
</div>
</body>
1. Z-Index
The z-index CSS property identifies how “close” or “far away” a CSS layer is from the viewer. In other words, width goes in one dimension horizontally, height adds a second dimension vertically, and z-index adds a third dimension on an axis perpendicular to the screen. This is useful when divs overlap. The lower the z-index (e.g. z-index: 1;), the further back a div is. The higher it is (e.g. z-index: 99;), the more forward it is. This technique requires that you set the position to relative (we’ll look at position in greater detail later.)
Below, I’ve adjusted the margins of the second div so that the two boxes overlap. The purple box has a z-index of 1, putting it behind the orange box which has a higher z-index of 2. Both have a position of relative.
Overlapping divs with different z-index values
Here’s what happens if we switch the z-index values of the two boxes: the purple box moves to the front.
Switch the z-index values
2. Position
The position CSS property can be either set to static, relative, absolute, fixed. The default position is static.
- Static divs get plunked down right where they are in the flow of the HTML.
- Relative divs are like static divs but can be moved relative to the previous content.
- Absolute divs get pulled out of the HTML flow and act independently of all other divs.
- Fixed divs work like absolute divs with a twist: they stay in the same place in the browser window even when you scroll down.
We’ve looked at an application of the relative position above. Let’s go back to our simple divs and add absolute positions instead. Both divs are now positioned relative to top-left of the browser window instead of relative to each other.
Absolute positioning
A div with a fixed position stays in one place as you scroll.
Fixed positioning
Next: 3. Float
Nice tips and a good tutorial overall for beginners. Thanks.
Thanks, Abhijit!
Nice one.
Its not to many css tuts around.
Keep up the good work;)
Thanks, Angelshark!
Nice~ thank you for shared.
Thanks
and wow outstanding tutorials
Thank you!