Absolute Positioning
Stay Exactly Where I Tell YouStay In That Exact Spot
This property will be used sparingly. You will use the default, static, position most of the time.
When you want an element to stay in a very specific spot on the page, and scroll with the other content as you scroll the page, you can use absolute positioning. When absolute positioning is used, your element is actually taken out of the normal flow of the document. Other elements react as if your absolutely positioned element is not even there. Normally the code in Figure 1 would produce a page where the <div id="ad1"> would appear above the <div id="top-nav"> (see the image associated with Figure 1).
<div id="main"> <div id="ad1">Ad 1</div> <nav id="top-nav">Top Navigation</nav> <nav id="bottom-nav">Bottom Navigation</nav> <div id="ad2">Ad 2</div> </div>
If you were to specify that #ad1 had a position of absolute the <div id="ad1"> would move up and over the <div id="top-nav">. This is what is meant by taking it out of the normal flow (see the image associated with Figure 2).
#ad1{
position: absolute;
}
Specifying The Right Spot?
Just making your element absolutely positioned will move it out of the normal flow of the document, and it will place it at the top left of its containing box. To move it away from that location you will need to use the box offset properties (top, right, bottom or right). You give these properties a numerical value (px, %, or em). This value represents the distance your element will be placed away from the top, right, bottom or left side of the containing box.
The code in Figure 3 will move the <div id="ad1"> down the page 25px from the top, and 150px from the left side of the page.
#ad1{
position: absolute;
top: 50px;
right: 300px;
}
The code in Figure 4 will move the <div id="ad1"> down the page 50px from the top, and 300px from the right side of the page.
#ad1{
position: absolute;
top: 50px;
right: 300px;
}
Example Usage: div { position: absolute; }
Activity Instructions
Try to recreate what you see in the adjacent image. Following these steps will be helpful:
- Set the #ad1 position to be absolute in the CSS (position: absolute;)
- Set the #ad1 top offset to be 50px (top: 50px;)
- Play around with the value of the top offset until it matches what you see in the image
- Add a left offset to the #ad1, and play around with the value until it matches the image
- Once it looks like the image, try scrolling down the page. Notice that the <div id="ad1"> element scrolls when the page scrolls.