Wednesday , July 17 2019
Home / Uncategorized / How to use the position property in CSS to align the elements

How to use the position property in CSS to align the elements



Positioning elements in web development is not as easy as it seems. Things can get more complicated as more elements arrive at the page. Therefore, it is essential to know how to use CSS to align the elements. It will also save our time during coding.

There are several ways / methods to place items. using bootstrap it's a good way, for example, but not all projects use Bootstrap. So I will explain one of the ways to align the elements with pure CSS: the property position.

CSS position and helper properties

There are 5 main values โ€‹โ€‹of CSS positions:

position: static | relative | absolute | fixed | sticky

and properties for setting the coordinates of an element (I'll call them "Helper Property"):

top | right | down left IS z-index

Note: the support properties do not work without a declared or con position position: static.

What is this Z-Index?

We have height and width (x, y) as 2 dimensions. Z is the 3rd dimension. An element is faced with other elements such as his z-index the value increases. Z-index it also does not work with position: static or without a declared position.

Items are ordered from the back to the front, like theirs z-index to increase

Now let's explain the CSS: position values in detail.

1. Static

position: static it is the default value. Whether we declare it or not, the elements are placed in the normal order on the web page. Let's take an example:

First of all, let's define our HTML structure:




%MINIFYHTML783d53e579f16247f7701b15326d22c210%

So, let's create 2 boxes and define their positions:

.box-orange {// without any declaration of position
background: orange;
height: 100 px;
width: 100 px;
}
.box-blue {
background: lightskyblue;
height: 100 px;
width: 100 px;
position: static; // Stated as static
}
same result with and without position: static

The div are block elements by default, which is why they are not on the same line. I'll explain it in another article.

2. Relative

position: relative: The new position of an element with respect to its normal position.

To start with position: relative and for everyone not static position values, we can change an item default position. But only by defining position: relative It's not enough, we also need to set the coordinates of the element with support properties.

We move the orange box next to the blue one.

.box-orange {
position: relative; // Now we can move the item
background: orange;
width: 100 px;
height: 100 px;
top: 100px; // 100px from the relative above his old position
left: 100px; // 100 px from the left
}
The orange box is moved 100 px down and to the right, relative to its normal position

NOTE: Use position: relative for an element, it does not affect the positions of the other elements.

3. Absolute

In position: relative, the item is positioned relating to himself. However, a absolute The positioned element is related to his parent.

An element with position: absolute is removed from the normal flow of documents. It automatically positions itself on the starting point (Top left corner) of his parent element. If it has no parent element, then the initial document he will be his parent.

From position: absolute removes the element from the document flow, other elements they are interested and behave like the item is completely removed from the web page.

We add to container as a main element:






Change its position value to absolute:

.box-orange {
position: absolute;
background: orange;
width: 100 px;
height: 100 px;
}
position: absolute brings the item to the beginning of his parent

Now it seems that the blue box has disappeared, but it is not. The blue box behaves as if the orange box had been removed, then passes in place of the orange box.

Let's move the orange box of 5 pixels:

.box-orange {
position: absolute;
background: orange;
width: 100 px;
height: 100 px;
left: 5px;
start: 5px;
}
Now we can see the blue box

The coordinates of a absolute positioned element are related to his parent if the parent also has a non-static position. Otherwise, the helper properties position the element with respect to the initial.

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

4. Fixed

Like it position: absoluteeven the fixed positioned elements are removed from the normal document flow. The differences are:

  • They are only relative to document, not other parents.
  • They are not affected by scrolling.

Here in the example, I change the position of the orange box in fixedand this time it is relative 5px to the right of the it's not his parent (container).

As we can see, scrolling the page does not affect the fixed box positioned. It is no longer relative to its parent (container) anymore.

5. Sticky

position: sticky it can be explained as a mix of position: relative is position: fixed.

It behaves until a point declared as position: relative, after changing his behavior in position: fixed . The best way to explain position: sticky is with an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of Edge.

The best way to understand CSS positioning is in practice. Continue programming until you have a better understanding. If something is not clear, I will answer your questions in the comments section.

Thanks for your time and support ๐Ÿ™‚


Source link

Leave a Reply

Your email address will not be published.