Positioning: Static, Relative, Absolute, Fixed, Sticky
Positioning of different types of box models in HTML web page is controlled by applying position to the element using CSS. Different CSS box model positioning attributes in HTML web page provide you control over how and where to place web page content element information in the box model, where the web developer decides how to display web page elements in the web page and how to manipulate or control the existing web page elements with other elements. Here by default, you get five types of box model positioning. In which, static box model position, relative box model position, absolute box model position, fixed box model, and sticky box model, position are the major box model positions.
Static box model positioning in CSS.
CSS static box model positioning in HTML web page displays all the digital content in the web page by aligning it in the default positioning. This previews web elements in your web page as a normal document box. By default, static box model positioning in a web page has no significant effect on the top, bottom, left, and right box model attributes.
Static box model example in an HTML web page.
.boxmodel-static {
width: 300px;
height: 140px;
background-color: teal;
}
Relative box model positioning in CSS.
CSS Relative box model positioning in an HTML web page displays web elements in a document relative position in a box model document.
Whereas normally relative box model positioning will preview the top, bottom, left, and right box model properties in an offset order.
Relative box model example in an HTML web page.
.boxmodel-relative {
position: relative;
width: 400px;
height: 200px;
background-color: yellow;
top: 30px; /* it displays box model 20px down from top position */
left: 20px; /* it moves active box model 20px from left position to right direction */
}
Absolute box model positioning in CSS.
CSS Absolute Box Model Positioning Web page elements in an existing HTML web page are displayed at positions other than the nearest absolute position (static position) relative to the existing box model. While absolute box models preview in absolute position order with proper margins and alignment, sometimes absolute box models preview web page elements with exact dimensions. Absolute box model web page document display does not disturb or manipulate other elements.
Absolute box model example in an HTML web page.
.boxmodel-absolute {
position: absolute;
width: 200px;
height: 130px;
background-color: pink;
top: 70px; /* it moves 70px box model form top position */
left: 40px; /* it moves box model content 40px from the left direction */
}
Fixed box model positioning in CSS.
In the current HTML web page, CSS fixed box model positioning previews the web page element at a relative position to the viewport. So that, this fixed box model is displayed at the same place even when the web page is scrolled in the current web page.
Whereas in box model fixed position, it is removed from the normal web page document preview.
Fixed box model example in an HTML web page.
.boxmodel-fixed {
position: fixed;
width: 70px;
height: 70px;
background-color: green;
top: 20px; /* it moves 20px from the top of the viewport settings */
right: 20px; /* it moves 20px from the right of the viewport settings */
}
Sticky box model positioning in CSS.
In the current HTML web page, CSS sticky box model positioning does not move the web page element between relative and absolute position based on user scroll condition, but holds it in sticky position. Sticky box model position behaves like relative box model until user scroll reaches bottom page condition in web browser, after that the box becomes fixed in sticky order while scroll position in web page keeps moving.
Sticky box model example in an HTML web page.
.boxmodel-sticky {
position: sticky;
top: 0; /* set 0 sticky position of sticky box model */
width: 100%;
height: 70px;
background-color: gray;
}
So, let’s create a box model example in an HTML web page that explains all five-box model positioning.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS All Top Five Box Model Positioning Code</title>
<style>
body {
height: 1000px; /* Use to web page scrolling */
font-family: monotype corsiva;
font-weight:bold;
text-align: center;
}
.boxmodel-static {
background-color: #29b6f6;
width: 300px;
height: 140px;
}
.boxmodel-relative {
position: relative;
background-color: #ef9a9a;
width: 270px;
height: 130px;
top: 10px; /* it offset box model position form top */
}
.boxmodel-absolute {
color:white;
position: absolute;
background-color: #795548;
width: 170px;
height: 90px;
top: 70px; /* move or position the absolute box position form it nearest element */
left: 40px;
}
.boxmodel-fixed {
color:white;
position: fixed;
background-color: #33CC00;
width: 100px;
height: 100px;
top: 10px;
right: 10px;
}
.boxmodel-sticky {
color:white;
font-size:1.5em;
position: sticky;
top: 10px; /* it sticks 10px from top of the viewport settings */
width: 110%;
height: 40px;
background-color: #ff5722;
}
</style>
</head>
<body>
<div class=”boxmodel-static”>Example Of Static Box Text Positioning</div>
<br><br><br><br>
<div class=”boxmodel-relative”>Example Of Relative Box Text Positioning</div>
<br>
<div class=”boxmodel-absolute”>Example Of Absolute Box Text Positioning </div>
<br><br>
<div class=”boxmodel-fixed”>Example Of Fixed Box Text Positioning </div>
<br>
<div class=”boxmodel-sticky”>Example Of Sticky Box Model Text Positioning</div>
<br>
<div style=”margin-top: 170px; color:red; font-size:1.5em; font-family:arial”>This Is The Example Of Simple Sticky Text Without Box Model</div>
</body>
</html>
Box model positioning explanation in HTML web page.
- Static box model position – The box model is previewed in the default positioning in the current web page. Where static box elements are previewed in the normal order.
- Relative box model position – The relative position offset of the normal position in the current web page affects the element.
- Absolute box model position – The absolute box model element position in the current web page is removed from the normal flow by the relative position of the nearest neighbor.
- Fixed box model position – The relative position of the web page viewport in the current web page, which keeps its position in place during web page scroll conditions.
- Sticky box model position – Connects relative and fixed box model positioning in the current web page, and the sticky box model becomes stuck at a particular point during user scrolling of the web page in the web browser. And even if the user scrolls, it has no effect on the web page.
