The position property in CSS is used to control the positioning of an element on a webpage. It defines how an element is placed within its containing element and how it interacts with other elements.
The position property has several possible values, each with its own behavior:
The position: static; property value in CSS is the default positioning behavior for HTML elements. When an element is set to position: static;, it follows the normal flow of the document and is not affected by the top, bottom, left, right, or z-index properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Position Static</title>
</head>
<body>
<h1>Welcome to JTC</h1>
<div class="static_element">
<p>In this example, the div element with the class static-element will have its default static positioning behavior.</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.static_element{
width: 20%;
padding: 10px;
position: static;
}
Note:
• Elements with position: static; are positioned in the normal document flow.
• The top, bottom, left, right, and z-index properties have no effect on elements with this position value.
• Margins, padding, and borders of the element will behave as expected within the document flow.
• The element will be displayed based on its position in the HTML structure and its parent's layout.
In most cases, you don't need to explicitly set position: static; as it's the default value. However, understanding it is crucial for grasping how the position property works, and it provides a reference point for other positioning values like relative, absolute, fixed, and sticky.
The position: relative; property value in CSS is used to position an element relative to its normal position in the document flow. When an element is set to position: relative;, you can adjust its position using the top, bottom, left, and right properties. This value allows you to nudge the element from its original position without affecting the layout of other elements around it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Position Static</title>
</head>
<body>
<h1>Welcome to JTC</h1>
<div class="relative_element">
<p>In this example, the div element with the class relative-element will be positioned 20px down and 40px to the right from its normal position.</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.relative_element{
position: relative;
top: 20px;
left: 30px;
}
Note:
• Elements with position: relative; maintain their space in the layout and interact with other elements as if they were still in their normal flow.
• The top, bottom, left, and right properties are used to adjust the element's position relative to where it would be normally.
• Adjusting an element's position using position: relative; can affect how overlapping elements are displayed.
This value is often used for subtle positioning adjustments or for creating certain visual effects within the normal flow of the document. It's important to remember that position: relative; does not remove the element from the document flow like position: absolute; or position: fixed; does.
The position: fixed; property value in CSS is used to position an element relative to the viewport, meaning it stays in the same position on the screen even as the user scrolls. This is often used to create elements that "stick" to a specific location, such as a navigation menu that remains visible at the top of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Position Fixed</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Enquire Now</a></li>
</ul>
</nav>
<div class="fixed_element">
<p>In this example, the nav element with ul and li elements will be positioned at the top of the viewport and remain fixed there even when the user scrolls. The top: 0; and left: 0; properties ensure that it is fixed at the top-left corner of the screen, and the width: 100%; makes it span the full width.</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav ul{
display: flex;
justify-content: space-evenly;
width: 100%;
background: beige;
height: 50px;
position: fixed;
top: 0;
left: 0;
align-items: center;
list-style-type: none;
}
nav ul li a{
text-decoration: none;
color: black;
}
.fixed_element{
position: absolute;
top: 55px;
left: 20px;
}
Note:
• Elements with position: fixed; are removed from the normal document flow and positioned relative to the viewport.
• They stay in the same place on the screen regardless of scrolling, making them suitable for elements like headers, footers, and sticky navigation menus.
• You can use top, bottom, left, and right properties to position the element precisely.
• Be cautious with fixed positioning, as it can cover other content and potentially lead to accessibility issues if not used thoughtfully.
position: fixed; is commonly used for creating fixed headers, footers, banners, or any other element you want to remain in a consistent position on the screen while users scroll through the content.
The position: absolute; property value in CSS is used to position an element relative to its nearest positioned ancestor (parent) or the initial containing block. An element with position: absolute; is taken out of the normal document flow, allowing you to precisely control its position within its containing element or the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Position Absolute</title>
</head>
<body>
<div class="relative_element">
<h1>Welcome to JTC</h1>
<p>In this example, the div element with relative_element is positioned relative.</p>
<div class="absolute_element">
<h3>Position Absolute</h3>
<p>In this example, the div element with the class absolute_element will be positioned 100px from the top and 150px from the left of its nearest positioned ancestor.</p>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative_element{
position: relative;
width: 400px;
height: 400px;
margin: 20px;
padding: 10px;
border: 2px solid rgb(44, 82, 197);
}
.absolute_element{
position: relative;
top: 100px;
left: 150px;
width: 200px;
padding: 5px;
border: 2px solid rgb(44, 82, 197);
}
Note:
• Elements with position: absolute; are removed from the normal document flow and positioned relative to their nearest positioned ancestor (parent) that is not static. If no such ancestor exists, the element is positioned relative to the initial containing block (usually the viewport).
• You can use top, bottom, left, and right properties to position the element precisely.
• Elements positioned absolutely won't affect the layout of other elements around them, which can lead to overlapping if not managed properly.
• Be careful with position: absolute; as it can lead to complex layouts and potential layout issues.
position: absolute; is often used for creating overlays, tooltips, modal dialogs, or positioning elements precisely within a container. It's important to manage the positioning carefully to avoid unintended visual glitches and accessibility issues.
The position: sticky; property value in CSS is used to create an element that is positioned based on the user's scroll position. It behaves like relative positioning until a specified threshold is reached, at which point it becomes fixed positioning and sticks to a specific location on the screen. This can be used to create elements that remain visible as the user scrolls through content, and then become fixed once they reach a certain point.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Position Sticky</title>
</head>
<body>
<div class="top_header">
<h1>Welcome to JTC</h1>
<p>Position Sticky</p>
</div>
<div class="sticky_nav">
<p>In this example, the div element with the class sticky_nav will behave like relative positioning until it reaches the top of the viewport, at which point it will become fixed and stick to the top of the screen.</p>
<p>Scroll to stick this div element at top of the webpage.</p>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam ipsa hic enim numquam eum amet.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias fugiat sequi nulla id provident? Mollitia quia molestiae obcaecati laborum dignissimos reprehenderit sint quam. Sint amet eius distinctio autem non sunt eaque? Doloremque exercitationem sint, nisi sed aliquid, quo cupiditate assumenda ratione facilis error sunt corporis vel tempore nobis distinctio illo!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos laboriosam odio excepturi aliquam suscipit facilis placeat earum officiis doloribus dolor?</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top_header{
width: 100%;
height: 70px;
padding: 10px;
text-align: center;
background-color: darkgray;
border: 2px solid rgb(44, 82, 197);
}
.sticky_nav{
position: sticky;
top: 0;
padding: 5px;
background-color: thistle;
border: 2px solid rgb(44, 82, 197);
}
Note:
• Elements with position: sticky; are positioned based on the user's scroll position.
• They behave like relative positioning until they reach a specified threshold (usually a certain scroll position or distance from the top).
• Once the threshold is reached, the element becomes fixed and sticks to its specified position on the screen.
• You can use top, bottom, left, and right properties to position the element relative to its containing element or the viewport.
position: sticky; is commonly used for creating sticky headers, navigation menus, or any other element you want to remain visible as users scroll through content. It combines some of the advantages of both relative and fixed positioning, providing a useful tool for creating certain types of interactive and user-friendly interfaces.