How to use CSS position when creating a website layout

Posted on Posted in CSS

To set up an element to layout on your website, the following five values can be used for the CSS position: static, absolute, relative, fixed, and sticky. The CSS position controls where an item will be displayed on the website. The place on which an item can be displayed can also be determined using the properties: top, right, bottom, left and z-index.

  1. Stattic

Position: static is the default value for any element in the website layout. If you do not define the position property in CSS for an item, then it will automatically be set to static. Elements that have position static will appear on the site in normal flow. For example, if you have more than one <div> element one after another, they will appear on the page directly one after another. This can be displayed with the next HTML markup

<div class="first"></div>
<div class="another"></div>

And we’are using the folowing CSS.

.first { 
   // За елементот не е поставено својството position , а тоа значи вредноста е static 
} 
.another { 
   // не е поставено својството position , а тоа значи вредноста е static 

   top: 50px; 
}

On the second element, the top property is set to 50px. The expectation is that it will move down by 50px. But that does not happen. Because both elements have a static position, no CSS property will do anything. Therefore, the top property does not affect the display of the second element. The second element is placed just below the first without having a place among them.

static
View the full code in Codepen
  1. Relative

Position: relative is similar to static position in that the relatively positioned elements will follow the normal flow of the site. But the main difference is that the use of relative position will unlock other CSS properties for layout of elements.The item that should be positioned is set to position relative to the other elements of the page. CSS will now be:

.first { 
   position: static; 
} 
.another { 
   position: relative; 
   top: 50px; 
}

Position relative for the second element makes the top property: 50px to work. The second element is set to 50px under the first element.

position-relative

View the full code in Codepen

Relative positioning of two elements, parent and child

Let us consider two elements with relative positioning, from which one element – a child is nested in the other element – parent.

HTML:

<div class="parent "> 
   <div class="child "></div> 
</div>

CSS:

.parent {  
	  position: relative;
	}
	.child {
	  position: relative;
	  top: 0;
	  left: 0;
	}

View the full code in Codepen
  1. Absolute
    When using static or relative positioning, the elements are displayed one below the other, depending on their order in the HTML code. But with absolute positioning, the element is completely taken out of that entire flow. To consider the absolute positioning we change the positioning of an element – a child from relative to absolute positioning.
.parent {  
	  position: relative;
	}
	.child {
	  position: absolute;
	  top: 0;
	  left: 0;
	}

View the full code in Codepen

The child element is still within the parent element, but is now set to the left and top, covering the text content of the parent element. This is due to the absolute positioning and the style top: 0px and left: 0px of the child element. In the normal flow of things, the elements would not be at the top and would not cover other elements. Since the child element is absolutely positioned, it is essentially a different layer of normal elements. It can therefore be positioned on anything else that is on the website. But he will remain within the boundaries of the parent element – as long as the parent has a position.

The absolute positioned element needs to position itself in relation to a positioned ancestor. When an element is out of the normal flow it will look for an ancestor element that has its own position set.
Let’s look at what happens if an element child is absolutely positioned, but the parent element has no position?
Here is the CSS code:

.parent { 
   // No position set, so it's static 
} 
.child { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
}

And here’s what the resulting webpage would look like:


View the full code in Codepen

The child element is now out of the parental element because the parent element has no position. The child element is positioned on the next parent element, in this case the element <body> and that position is the most remote position to which it can go.

The position values fixed and sticky are similar to absolute positioning, but they are also related to scroll position on the page.

  1. Fixed positioning
    Fixed positioning take the element out of the normal flow and position it in the same place in the visible field on the screen (viewport). This means that scrolling will not affect its position at all.
    HTML code:
<div class="first purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div> 
<div class="another green"></div>

CSS:

.first { 
   position: relative; 
} 
.another { 
   position: fixed; 
   top: 0px; 
   left: 0px; 
}

And this is what that will look like.


View the full code in Codepen

A fixed position will remain positioned on the top and left corner of the viewport. If we scroll, the relatively positioned element will move normally, but the fixed position element will remain stuck in the place where we positioned it.
Note: the fixed position must have an top or bottom position. If not, it will not be shown at the page at all.
Fixed elements are often used to make a navigation menu.

  1. Sticky

Sticky positioned elements initially behave like position: relative, but if you scroll they will be taken out of the normal flow of the page and will behave as fixed positioned wherever they are placed.

We look at a sticky element with a yellow background located between the other two elements that contain a lot of text.

HTML:

<div class="first"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div> 
<div class="green"></div> 
<div class="another"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div>

CSS:

.first {  
	  position: relative;
	}

	.another {
	  position: sticky;
	  top: 0;
	}

When scrolling down the page, when the yellow element of the page is visible, it looks like a normal, relatively positioned element. But if we continue to scroll down, instead of moving off the page, it will remain fixed and stick to the top of the viewport.


View the full code in Codepen

Elements with position sticky just like the elements with position: absolute must have a top or bootom css property set. If a top or bottom css property is not set, then the element will continue to behave as if it is relatively positioned and will never become sticky.

Rada Arshinkovska

I create modern, high quality, responsive search engine friendly websites, beautifully crafted for my client needs and wishes. I build websites for individuals, businesses and organizations that have never had one, but also, for those who need help with redesigning their websites.

Leave a Reply

Your email address will not be published. Required fields are marked *

16 − 13 =