CSS Position Property

Dhananjay Kumar — Tue, 14 Jun 2022 17:09:13 GMT

Normally all the HTML elements follow a default order. To manipulate the position of HTML elements inside the view-port, we can use the CSS position property.

CSS Position property defines how an HTML element is positioned inside the browser's view-port. We use top, right, bottom and left properties to determine the final position of the element.

This can be used to place an element behind another with z-index property and also useful for scripted animation effect.

Position property can take five values are listed below :

static
relative
absolute
fixed
sticky

1. static

position: static is the default property for any element. Left, right, top, bottom and z-index properties do not affect a static positioned element. Element remained positioned according to the normal flow of the document.

HTML

<div class="parent-element">
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
    <div class="positioned-element">
      I am the main <strong>positioned staticstrong> element.
    div>
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
div>

CSS

.positioned-element {
    position: static;
    left: 16px;
    top: 16px;
    background-color: #104a65;
    color: #ffffff;
    padding: 16px 10px;
}
.simple-element {
    padding: 16px 10px;
    background-color: #ddd;
}

https://codepen.io/erdhananjay7/pen/GRQPbXR

Here notice the left and top values have no effect on positioned sticky element

2. relative

Elements having position: relative will remain in it's normal flow of the web page. But, here the left, right, top, bottom and z-index properties affect the position of the element.

Let's replace position: static with position: relative in above example.

HTML

<div class="parent-element">
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
    <div class="positioned-element">
      I am the main <strong>positioned relativestrong> element.
    div>
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
div>

CSS

.positioned-element {
    position: relative;
    left: 16px;
    top: 16px;
    background-color: #104a65;
    color: #ffffff;
    padding: 16px 10px;
}
.simple-element {
    padding: 16px 10px;
    background-color: #ddd;
}

https://codepen.io/erdhananjay7/pen/GRQzKew

Here notice that the left and top properties now affect the position of the element. Also the element remains in the normal flow of the document and the offset is applied relative to itself.

3. absolute

Element having position: absolute is positioned relative to its closest positioned parent if any. Otherwise it will be placed relative to the next parent positioned element and it's final position is defined by the top, right, bottom, and left value provided to it.

If there's no positioned parent element, it is positioned relative to the (e.g. root) element.

The element is removed from the normal document flow in this case. The other elements will behave as if that element is not in the document. No space is there for the positioned absolute element in the page layout.

Let's check our example, we change the value of position to absolute from relative. Also we will give relative position to it's parent element so that it's position not get relative to the element.

HTML

<div class="parent-element">
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
    <div class="positioned-element">
      I am the main <strong>positioned absolutestrong> element.
    div>
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
div>

CSS

.parent-element {
    position: relative;
}
.positioned-element {
    position: absolute;
    left: 30px;
    top: 30px;
    background-color: #104a65;
    color: #ffffff;
    padding: 16px 10px;
}
.simple-element {
    padding: 16px 10px;
    background-color: #ddd;
}

https://codepen.io/erdhananjay7/pen/zYReYEp

Here notice that no space was created in the document for the positioned absolute element. Element is now positioned relative to the parent element.

4. fixed

Elements having position: fixed are somewhat similar to positioned absolute elements. They also don't take space in the document and removed from the page layout. But they always get positioned with relative to the element (i.e.) the root of the document.

They always stay in same position on the screen while scrolling.

Final position of the element is determined by the values of top, right, bottom, and left.

In our example let's change the value of position to fixed from absolute.

HTML

<div class="parent-element">
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
    <div class="positioned-element">
      I am the main <strong>positioned fixedstrong> element.
    div>
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
div>

CSS

.parent-element {
    position: relative;
}
.positioned-element {
    position: fixed;
    left: 30px;
    top: 30px;
    background-color: #104a65;
    color: #ffffff;
    padding: 16px 10px;
}
.simple-element {
    padding: 16px 10px;
    background-color: #ddd;
}

https://codepen.io/erdhananjay7/pen/yLvZNVd

4. sticky

sticky positioned elements are positioned according to the normal flow of the document, and then offset (based on the values of top, right, bottom, and left) relative to its nearest scrolling container/parent and containing block (block-level container).

Until a certain scroll point it acts like a relatively positioned element and then it acts like a fixed element.

HTML

<div class="parent-element">
  <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
    <div class="positioned-element">
      I am the main <strong>positioned stickystrong> element.
    div>
    <div class="simple-element">
      Lorem Ipsum is simply dummy text
    div>
div>

CSS

.parent-element {
    position: relative;
    height: 850px;
}
.positioned-element {
    position: sticky;
    top: 30px;
    background-color: #104a65;
    color: #ffffff;
    padding: 16px 10px;
}
.simple-element {
    padding: 16px 10px;
    background-color: #ddd;
}

https://codepen.io/erdhananjay7/pen/ZErwbXy

Use of z-index property

HTML elements having higher value of z-index will overlap the element with a lower z-index value. This property only works on the positioned elements (relative, absolute, fixed and static). It doesn't affect the elements with position: static.

The value of z-index can be set with an integer value.

Truncating text vertically at specific line number

Dhananjay Kumar — Sun, 22 May 2022 16:29:45 GMT

While creating a card with small info which redirects to the detail somewhere else, we sometimes need to limit our information text to specific line let's say 3 or 4 and truncate the rest content vertically.

Here -webkit-line-clamp comes into the role.

The CSS property- -webkit-line-clamp allows limiting of the contents of a block container to the specified number of lines.

Combination of display property set to -webkit-box or -webkit-inline-box and -webkit-box-orient property set to vertical is needed to work line-clamp properly.

Also in most of the cases contents won't be clipped but an ellipsis will still be shown after the specified number of lines, for this we need to set overflow to hidden.

HTML

<p>
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       Lorem Ipsum has been the industry standard dummy text ever since the
       1500s, when an unknown printer took a galley of type and scrambled it to
       make a type specimen book. It has survived not only five centuries, but also
       the leap into electronic typesetting.
p>

CSS

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Codepen

https://codepen.io/erdhananjay7/pen/WNMEOYK

CSS Insiders

CSS Position Property

Position property can take five values are listed below :

1. static

HTML

CSS

2. relative

HTML

CSS

3. absolute

HTML

CSS

4. fixed

HTML

CSS

4. sticky

HTML

CSS

Use of z-index property

Truncating text vertically at specific line number

HTML

CSS

Codepen