CSS Position
The position CSS property sets how an element is positioned in a document.
It is also used to place an element behind another and also useful for scripted animation effect. Thetop,right, bottom, and leftproperties determine the final location of positioned elements.
These properties can be used only after position property is set first. A position element's computed position property is static, relative, absolute, fixed or sticky.
Values
static
The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
relative
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value ofz-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
fixed
The element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.
What is the default position of HTML elements in CSS?
By default, the position property for all HTML elements in CSS is set to static. This means that if you don't specify any other position value or if the position property is not declared explicitly, it'll be static.
You can view the Deafault position of elements using Chrome Developer Tools
A useful tool in your front end web development workflow is Chrome's Developer Tools.
Visually, all elements follow the order of the HTML code, and in that way the typical document flow is created.Elements appear one after the other – directly below one another, according to the order of the HMTL code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Positioning</title>
</head>
<body>
<div class="parent">
<div class="child one">One</div>
<div class="child two">Two</div>
<div class="child three">Three</div>
<div class="child four">Four</div>
</div>
</body>
</html>
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
Theposition property isn't declared in the above code and it therefore reverts to the default position: static. It follows the order of the HTML code.
What is position relative in CSS?
position: relative works the same way as position: static;, but it lets you change an element's position.
But just writing this CSS rule alone will not change anything.To modify the position, you'll need to apply the top, bottom, right, and left properties mentioned earlier and in that way specify where and how much you want to move the element.
The top, bottom, right, and left offsets push the tag away from where it's specified, working in reverse.Top in fact moves the element towards the bottom of the element's parent container. bottom pushes the element towards the top of the element's parent container, and so on.
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
Here, the square has moved 50px from the left of where it was supposed to be by default.
position: relative; changes the position of the element relative to the parent element and relative to itself and where it would usually be in the regular document flow of the page. This means that it's relative to its original position within the parent element.
What is position absolute in CSS?
If you update the CSS rule for the first square to the following:
.one {
background-color: powderblue;
position: absolute;
}
You'll get this result:
This is unexpected behavior. The second square has completely disappeared.
/*If you also add some offset properties like this:*/
.one {
background-color: powderblue;
position: absolute;
top: 50px;
left: 0;
}
Well now the square has completely abandoned it's parent.Absolute-positioned elements are completely taken out of the regular flow of the web page.They are not positioned based on their usual place in the document flow, but based on the position of their ancestor.
In the example above, the absolutely positioned square is inside a statically positioned parent.
This means it will be positioned relative to the whole page itself, which means relative to the<html> element – the root of the page.
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
position: relative;
}
.one {
background-color: powderblue;
position: absolute;
top: 50px;
left: 0;
}
The coordinates, top: 50px; and left: 0;, are therefore based on the whole page.
If you want the coordinates to be applied to its parent element, you need to relatively position the parent element by updating .parent while keeping.one the same:
What is Postion Fixed in CSS?
The element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
HTML
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
uam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<div class="box" id="one">One</div>
CSS
* {
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
position: fixed;
top: 80px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
Output
What is Sticky Postion in CSS?
Sticky positioning can be thought of as a hybrid of relative and fixed positioning when its nearest scrolling ancestor is the viewport. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example:
#one { position: sticky; top: 10px; }
The above CSS rule would position the element with id one relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
HTML
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
<div>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</div>
<div>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>
CSS
* {
box-sizing: border-box;
}
dl > div {
background: #fff;
padding: 24px 0 0 0;
}
dt {
background: #b8c1c8;
border-bottom: 1px solid #989ea4;
border-top: 1px solid #717d85;
color: #fff;
font: bold 18px/21px Helvetica, Arial, sans-serif;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #ccc;
}
Output
Thank you for Reading..!!