The element's position in the DOM can be controlled using the position attribute. By defining where to start with relation to the body or other neighboring elements, we can have complete control over the element.
Types of positions
- Static (default)
- Relative
- Absolute
- Fixed
- Sticky
1) Static
By default, all HTML components will all be in the static position. Any element with a static location, such as an element with block properties or an element with inline properties, will behave properly.
HTML:
<div class="static">
This div element has a position static;
</div>
CSS:
div.static {
position: static;
border: 5px solid #DE4839;
}
2) Relative
The position of close items is supported by the use of the relative attribute. In the majority of use situations, we provide the parent elements a relative value.
HTML:
<div class="relative">
This div element has position relative;
</div>
CSS:
div.relative {
position: relative;
left: 50px;
border: 5px solid #383CC1;
}
3) Absolute
When a parent element's relative property has to be changed, the absolute position of the current element is used. I'll list all the elements that are classified as positions in the field of design by altering the top, bottom, left, right, and z-index, absolute can be viewed as layers.
HTML:
<body>
<header>
<a href="">Home</a>
<button>This is button</button>
<div class="user">
<img src="user.png">
<span class="user-status"></span>
</div>
</header>
</body>
CSS:
.user img{
position:relative;
width: 50px;
height:auto;
}
.user-status {
position: absolute;
top: 0;
right:-20px;
width:10px;
height:60px;
background:#F4BE2C;
}
4) Fixed
Fixed elements will always use the body tag as a reference. Any element that has been designated as fixed remains fixed to the document and does not move, regardless of the size of the window. Let's take a sheet of paper to make assembly easier. Next, make a circle on the paper, and then try to pull the corners of the paper apart. But the circle's position will not change.
HTML:
<body>
<div class="nav">
<ul>
<li>List - 1</li>
<li>List - 2</li>
<li>List - 3</li>
<li>List - 4</li>
</ul>
</body>
CSS:
div.nav {
position: fixed;
top: 0;
left:0;
}
5) Sticky
The behaviour of elements with sticky positions depends on the user's scroll position.
Depending on the user's scroll position, every element with sticky position alternates between relative and fixed positions. It is at a relative position until a predetermined offset position is reached in the viewport, at which point it "sticks" there (like position:fixed)
HTML:
<body>
<div class="products">
<div>...</div>
</div>
<footer class="sticky">
<ul>
<li>List - 1</li>
<li>List - 2</li>
<li>List - 3</li>
<li>List - 4</li>
</ul>
</footer>
</body>
CSS:
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}