Xopus

Main Menu

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund

Xopus

Header Banner

Xopus

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund
CSS
Home›CSS›Understanding the CSS Position property with practical examples

Understanding the CSS Position property with practical examples

By Warren B. Obrien
September 10, 2021
0
0


Want to improve your design skills and improve the user experience on your website? It’s easier with a full understanding of the different CSS methods for positioning elements. You can create an amazing web page with a basic understanding of web design. But the main problem arises when your web project is more detail-oriented, especially if it requires complex alignment of elements on the page.

Fortunately, you can improve the functionality of your site and speed up your workflow by using proper CSS positioning. Let’s explore different CSS positioning properties and take a look at the different layouts you can use to create a modern web page.

What is the position CSS property?

CSS position The property defines the position of an element. You can manipulate the location of an element with left, law, High, low, and z-index Properties. Although you can use CSS Flexbox or CSS Grid to create symmetrical websites, positional properties help you create asymmetric websites by separating each element from other elements.

In other words, the CSS position property allows elements to move freely in a document.

The syntax of the CSS position property is:

position: value;

Here are the five values ​​that the position property can take:

  1. static

  2. relative

  3. absolute

  4. fixed

  5. tights

NOTE: You can position elements using the left, right, top, and bottom properties. But these properties behave differently, depending on the place value.

CSS static positioning

Static is the default position for HTML elements. Let’s look at some HTML examples to figure it out:







CSS Position Property




Child 01

Child 02

Child 03



We have placed three children in a parent container. We will use this example to play with the different position properties. Here’s the basic CSS that each of our examples will use:

.utility-flex {
display: flex;
justify-content: center;
align-items: center;
}

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
}

.child_1,
.child_2,
.child_3 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
background: #e961ee;
border: 5px solid rgb(255, 255, 255);
width: 300px;
height: 100px;
color: rgb(238, 238, 238);
border-radius: 5px;
margin: 5px;
}

Now let’s add position: static to the second child with the bottom and right properties.

.child_2 {
position: static;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

Here is the result :

CSS static positioning

As you can see the border property applies but there is no difference in the positioning of the second child. If you do not apply a CSS position property, the default will be static. This positions an element according to the standard page flow. Any element with a static position will ignore the left, right, top, bottom, and z-index properties.

CSS relative positioning

When you apply relative positioning, an element will initially behave the same as for static positioning. But now the left, right, top, bottom and z-index properties will work by moving the selected element from its original position in the specified direction.

Let’s change the position value of the second child from static to relative with the same top and bottom properties as before.

.child_2 {
position: relative;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

Here is the result :

CSS relative positioning

As you can see, the second child is offset 40px from the bottom (up) and 50px from the right (to the left).

Absolute CSS positioning

Any element with absolute positioning is removed from the normal flow of the document. The other elements will behave as if this element does not exist in the document. The final position of the element is determined by the top, bottom, left, and right properties.

Note that an element with absolute positioning is positioned relative to its nearest positioned (non-static) ancestor. If there is no ancestor positioned, it is positioned relative to the initial containing block.

Let’s understand this with the help of two examples. First, a child in absolute position without a positioned ancestor:

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
}

.child_2 {
position: absolute;
bottom: 190px;
right: 500px;
border: 8px solid purple;
}

Here is the result :

Absolute CSS positioning

In this second example, the parent container has a non-static position:

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
position: relative;
}

.child_2 {
position: absolute;
bottom: 20px;
right: 150px;
border: 8px solid purple;
}

The child is now positioned in relation to its container:

Applying the absolute position property on child_2 when the ancestor is in relative position

CSS fixed positioning

An element with a fixed position is also removed from the normal flow of the document. There is no space created for this element throughout the layout. It is positioned relative to the initial container block defined by the window (except when one of its ancestors has a filter, transform, or perspective property set to a value other than none). The top, left, right and bottom properties will decide the final position of the element.

Let’s adjust our existing example by adding more children. Previously, we fixed the height of the parent container. Let’s remove it and set flex-direction: column so that our flex container is large enough to scroll down and see the result. Now add the fixed position property to the second child as shown below:

.utility-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
/* height: 400px; */
margin: auto;
/* position: relative; */
}

.child_2 {
position: fixed;
bottom: 300px;
right: 100px;
border: 8px solid purple;
}

Here is the result :

CSS fixed positioning

Scrolling therefore does not affect the position of the second child at all. Its position is fixed with respect to the initial container block defined by the window. Sometimes scrolling items can cause performance and accessibility issues. You can create an accessible website using semantic HTML and CSS.

Sticky CSS positioning

An element with sticky positioning has mixed relative and fixed positioning properties. A sticky positioned element will follow the relative positioning properties until it crosses the specified threshold. After that, it will behave as if it is fixed, until it reaches its parent’s limit.

You can specify the threshold using the left, right, top, and bottom properties. Without a threshold, the element will behave as if it had a relative positioning.

Let’s set the second position of the child on sticky with an upper threshold:

.child_2 {
position: sticky;
top: 0px;
border: 8px solid purple;
}

Here is the result :

Sticky CSS positioning

As you can see, the second child behaves like the other children when scrolling. But when it reaches the threshold value (high: 0px), it behaves as if it is fixed and exits the normal document flow. You can make a navigation bar stick to the header with sticky positioning.

Conclusion

The CSS position property is an advanced web design skill. It takes some learning, but all you have to do is play around with different values, results, and exceptions. Remember, nothing can beat practice when it comes to creating an awesome web design. So keep practicing and you will get better. Good coding!


new featured CSS features

7 new CSS features to create a responsive website

Unleash the strength of style using these seven new CSS features

Read more


About the Author

Nainy Mourya
(5 published articles)

Naincy specializes in building highly responsive websites and effective content strategy as well as web copies. She is a freelance technical writer who keeps a keen eye on trending technologies.

More from Naincy Mourya

Subscribe to our newsletter

Join our newsletter for technical tips, reviews, free ebooks and exclusive offers!

Click here to subscribe


Related posts:

  1. What are Cascading Style Sheets and what is CSS for?
  2. Update from the European Commission: The future revision of REACH and the restriction of PFAS | Jones Day
  3. The Greeting Cards Market Expected To Experience High Growth By 2026
  4. Virtual Healthcare Assistant Market to Grow Exponentially Between 2021 and 2028 | Key players – CSS Corp, eGain, idAvatars, Kognito, MedRespond

Recent Posts

  • This Keyboard Shortcut Can Undo Your Most Annoying Browser Mistake
  • UCSF and I-SPY 2 breast cancer researchers develop newly redefined breast cancer response subtypes
  • India-based web design company promises free food to children in need
  • Global Chromium Powder Market Size 2022 Booming By Share, Growth Size, Scope, Key Segments And Forecast To 2029 – Industrial Computing
  • Google Search Adds Author Markup Best Practices

Archives

  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021

Categories

  • Chrome
  • CSS
  • Firefox
  • Fund
  • Schemas
  • Terms and Conditions
  • Privacy Policy