Absolute Positioning

When you want to make an element in your CSS stick to a certain spot, you can do s by using absolute positioning in CSS. Using this ability will allow you to specify where in the browser and element appears, no matter where the rest of the content is. This is great when you want the rest of your site to behave normally, while one element acts a certain way. Below, I’ll show you how to use absolute positioning on your site.

div
{
position:absolute;
left:40px;
top:50px;
}

What the CSS above tells the browser is to position the div element at exactly the point specified. Then, the next two lines tell the browser the coordinates where the div should be displayed. This can be left or right, and top or bottom. This is essential for positioning the div exactly where you want it. The CSS above tells the browser to go all the way to the left, and then space the div 40 pixels from the left. Then, it tells the browser to find the top and space the div 50 pixels from the top. This works the same so matter what you specify.

Notes on Absolute Positioning

If your div element is by itself, it will determine its position based on the whole browser. However, if your div is inside of, or nested as it’s called, inside of another element, you can set the CSS of that element to position: relative. Then, the the div with absolute positioning will determine it’s position based on the div that it is inside of. Below is a diagram of what I mean.

When there is no CSS on the parent div, the orange div is positioned absolutely based on the entire browser. When the parent div is set to relative positioning, the orange div is positioned based on it’s parent. This will help you to fix some alignment issues when you run into trouble.

Conclusion: Absolute Positioning in CSS

Do you have any questions about absolute positioning in CSS? If you have any questions or thoughts, be sure to leave them in the comments section below.