Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to CSS Index Page

 

CSS Positioning
Intro

Positioning is a way of moving elements around on a webpage.

With all of the positioning methods (except static), you move an element with the top, bottom, left and right properties. You can also use z-index move the element's position forwards or backwards on a page.

Also, when you look at a "positioned" element in the "inspector", you'll notice that the position property is outside of the margin property. So moving from the outside inwards, you would have position, then margin, then padding.

Static

Satic positioning is the default HTML positioning method. If no other positioning is defined, the page will default to static positioning. What this means in practice is that the page will follow the default flow of top to bottom, and left to right.

Relative

Relative position is setting a position that is relative to it's original position. So you can move an element up, down, left and right relative to it's original position.

Setting the top, right, bottom, and left properties of a Relative-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Absolute

Absolute positioning is setting a position that is relative to the nearest positioned ancestor, or to the top left corner of a webpage (if there is not a near positioned ancestor).

Let's break this down a little. We'll create a green, 250px by 250px <div>, that is positioned with relative positioning which means, "relative to it's original position". So if we don't move, or offset it in any way, it will remain at it's original position.

We then add a blue, 150px by 150px <div>, inside of our green <div>, and use absolute positioning. And because the green box was "positioned", it becomes the nearest positioned ancestor to our blue box.

So the blue box being positioned absolute, will be positioned, relative to the green box. And if there was not a nearest ancestor that has been "positioned", then the second part of the rule would apply, and the blue box would be positioned, relative to the top left corner of the webpage.

Now what we mean by an element being positioned, is that it has a defined position (static, relative, absolute, or fixed). Remember, you move an element with the top and left properties.

So if we move our blue box top: 25px; and left: 25px; it would move the blue box, down and right, 25px, relative to the green box, like so:

And if we remove the position: relative from the green box, the blue box would then move relative to the top left corner of the webpage. Also, z-index could be relevant here as well.

Absolute positioned elements are removed from the normal flow, and can overlap other elements.

Here is the CSS Code to make this work:

  • CSS
  • style.css
  • div.greenBox{
    • width: 250px;
    • height: 250px;
    • background-color: seagreen;
    • position: relative;
  • }
  • div.blueBox{
    • width: 150px;
    • height: 150px;
    • background-color: blue;
    • position: absolute;
  • }
and to "move" the blue box:
  • div.blueBox{
    • width: 150px;
    • height: 150px;
    • background-color: blue;
    • position: absolute;
    • top: 25px;
    • left: 25px;
  • }

Fixed

Fixed positioning will position an element relative to the top, left corner of the "browser window".

This is significantly different than absolute positioning where an element might be positioned to the top, left corner of the webpage. Because with fixed positioning, the element is being fixed to the browser window, which means that if you scroll down a webpage, the element will remain in the same place, where absolute positioning would scroll with the page.

A Fixed element does not leave a gap in the page where it would normally have been located..


Back to Top