CSS position properties

how to usepositionProperties in CSS

Positioning allows us to determine where and how elements are displayed on the screen.

You can move the elements and position them exactly where you want them.

In this article, I will also see how things change on the page based on the differences between the elements.positionInteract with each other.

We have a main CSS property:position.

It can have these 5 values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Static positioning

This is the default value of the element. Statically positioned elements are displayed in the regular page flow.

Relative positioning

If you setposition: relativeNow you can use attributes to position at an offset on the element

  • optimal
  • correct
  • bottom
  • Left

is calledOffset attribute. They accept length values or percentages.

takeThis example I made on Codepen. I create a parent container, a child container and an inner box with some text:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</div>

Using some CSS can provide some color and fill, but will not affect the position:

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
}

.child { background-color: #ff4797; padding: 30px; }

.box { background-color: #f3ff47; padding: 30px; border: 2px dotted #333; font-family: courier; text-align: center; font-size: 2rem; }

The results are as follows:

You can try to add any of the attributes I mentioned earlier (top,right,bottom,left) To.box, Nothing will happen. The position isstatic.

Now if we setposition: relativeFirst of all, there is obviously no change. But the element can now be usedtop,right,bottom,leftAttribute, now you can change its position relative to the element that contains it.

E.g:

.box {
  /* ... */
  position: relative;
  top: -60px;
}

NegativetopWill move the box up relative to the container.

or

.box {
  /* ... */
  position: relative;
  top: -60px;
  left: 180px;
}

Notice how the space occupied by the box remains in the container as if it were still in place.

Another attribute that can be used now isz-indexChange the z-axis position. We will discuss it later.

Absolute positioning

surroundingsposition: absoluteRemove it from the document flow on the element, and it will no longer follow the page positioning flow.

Remember when relative positioning, did we notice that the space originally occupied by the element was retained, even if it was moved?

With absolute positioning, once we setposition: absolutein.box, Now its original space has been collapsed, only the origin (x, y coordinates) remains unchanged.

.box {
  /* ... */
  position: absolute;
}

Now we can usetop,right,bottom,leftcharacteristic:

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

or

.box {
  /* ... */
  position: absolute;
  top: 140px;
  left: 50px;
}

The coordinates are relative to the nearest container, notstatic.

This means that if we addposition: relativeTo.childElement and then we settopwithleftSet to 0, the box will not be positioned atwindow, But position it at the 0,0 coordinate.child:

.child {
  /* ... */
  position: relative;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

This is (we have already seen).childIs static (default):

.child {
  /* ... */
  position: static;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

Like relative positioning, you can usez-indexChange the z-axis position.

Fixed position

As with absolute positioning, when assigning elementsposition: fixedIt has been removed from the page flow.

The difference in absolute positioning is that the element is now always positioned relative to the window instead of the first non-static container.

.box {
  /* ... */
  position: fixed;
}

.box {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
}

Another big difference is that the elements are not affected by scrolling. After placing a sticky element somewhere, scrolling the page will not remove it from the visible part of the page.

Sticky positioning

Although the above value has been around for a long time, this value was only recently introduced and is still relatively unsupported (See caniuse.com)

What I think of is the UITableView iOS componentposition: sticky. Did you know that when you scroll through the contact list and paste the first letter at the top, do you know that you are viewing the contact for that particular letter?

We performed the simulation using JavaScript, but this is the method natively adopted by CSS.

Download mine for freeCSS Manual


More CSS tutorials: