How to use the position property in CSS to align elements

How to use the position property in CSS to align elements

Posted by admin at December 29, 2019

Situating components with CSS in web improvement isn’t as simple as it appears. Things can get immediately entangled as your undertaking gets greater and without having a decent comprehension of how CSS manages adjusting HTML components, you won’t have the option to fix your arrangement issues.

There are various ways/strategies for situating components with unadulterated CSS. Utilizing CSS buoy, show and position properties are the most widely recognized strategies.

In this article, I will clarify one of the most befuddling ways for adjusting components to unadulterated CSS: the position property. I additionally have another post for CSS Display Property here.

We should start…

CSS Position and Helper Properties

So there are 5 primary estimations of the Position Property:

position: static | relative | total | fixed | clingy

what’s more, extra properties for setting the directions of a component (I call them “partner properties”):

top | right | base | left AND the z-index

Significant Note: Helper properties don’t work without a proclaimed position, or with position: static.

What is this z-index?

We have stature and width (x, y) as 2 measurements. Z is the third measurement. A component in the site page comes before different components as its z-list esteem increments.

Z-file doesn’t work with position: static or without an announced position.

Components are requested from back to front, as their z-list increment

You can watch the video on my channel to perceive how to utilize the z-index in more subtleties:

Presently how about we proceed onward with the position property estimations…

Static

position: static is the default esteem. Regardless of whether we pronounce it or not, components are situated in an ordinary request on the site page. How about we give a model:

To begin with, we characterize our HTML structure:

<body> 

<div class="box-orange"></div> 

<div class="box-blue"></div> 

</body> 

At that point, we make 2 boxes and characterize their widths, statures and positions:

.box-orange {/with no position announcement 

foundation: orange; 

stature: 100px; 

width: 100px; 

} 

.box-blue { 

foundation: lightskyblue; 

stature: 100px; 

width: 100px; 

position: static;/Declared as static 

} 

same outcome with and without position: static

As should be obvious in the image, characterizing position: static or not doesn’t have any effect. The cases are situated by the typical archive stream.

Relative

position: relative: A component’s new position comparative with its ordinary position.

Beginning with position: relative and for all non-static position esteems, we can change a component’s default position by utilizing the assistant properties that I’ve referenced previously.

How about we move the orange box beside the blue one.

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

Orange box is moved 100px to base and right, comparative with its typical position

NOTE: Using position: relative for a component, doesn’t influence other components’ positions.

Absolute

A component with position: absolute is expelled from the typical index stream. It is situated naturally to the beginning stage (upper left corner) of its parent component. On the off chance that it doesn’t have any parent components, at that point the underlying archive will be its parent.

Since position: total expels the component from the report stream, different components are influenced and act as the component is expelled totally from the site page.

We should include a holder as parent component:

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}

The directions of a flat out situated component are comparative with its parent if the parent likewise has a non-static position. Something else, partner properties position the component comparative with the underlying .

.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent

Fixed

Like position: total, fixed situated components are additionally expelled from the typical report stream. The distinctions are:

They are just comparative with the archive, no different guardians.

They are not influenced by looking over.

.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: fixed;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent
}


Comments

Write a Reply or Comment

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