Scribd
Upload
22 views

CSS Layout - The Position Property

The document discusses different types of CSS positioning properties including static, relative, fixed, absolute, and sticky. Static positions elements normally without affecting positioning of surrounding elements. Relative allows elements to be adjusted from normal position using top, bottom, left, and right properties. Fixed positions elements relative to the browser window and does not move when scrolling. Absolute positions elements relative to the first parent with non-static positioning, removing it from normal flow. Sticky positions elements relative until a certain scroll point is reached, then fixes it in viewport. Examples of each are demonstrated through code snippets.

Uploaded by

ITs Me Prash
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

CSS Layout - The Position Property

The document discusses different types of CSS positioning properties including static, relative, fixed, absolute, and sticky. Static positions elements normally without affecting positioning of surrounding elements. Relative allows elements to be adjusted from normal position using top, bottom, left, and right properties. Fixed positions elements relative to the browser window and does not move when scrolling. Absolute positions elements relative to the first parent with non-static positioning, removing it from normal flow. Sticky positions elements relative until a certain scroll point is reached, then fixes it in viewport. Examples of each are demonstrated through code snippets.

Uploaded by

ITs Me Prash
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

CSS position property

 The CSS position property is used to set position for an element.


 we can position an element using the top, bottom, left and right properties.
There are five different position values:
 static
 relative
 fixed
 absolute
 Sticky
CSS Static Positioning
 This is a by default position for HTML elements.
 It always positions an element according to the normal flow of the page.
 It is not affected by the top, bottom, left and right properties.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: static;
border: 3px black dotted;
display:inline-block;
}
.box{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
#two{
background:green;
}
</style></head>
<body>
<h2>Static Positioning</h2>
<div class="parent">
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class="box" id="three">three</div>
</div>
</body>
</html>
Relative Positioning:
An element with position: relative; is positioned relative to its normal position.
By applying the properties top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from its normal
position.
Other content will not be adjusted to fit into any gap left by the element.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
border: 3px black dotted;
display:inline-block;
}
.box{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
#two{
top:20px;
left:20px;
background:green;
position:relative;
}
<body>
<h2>relative positioning</h2>
<div class="parent">
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class="box" id="three">three</div>
</div>
</body>
</html>
CSS Fixed Positioning
 The fixed positioning property helps to put the text fixed on the browser.
This fixed test is positioned relative to the browser window and doesn't move
even you scroll the window.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
border: 3px black dotted;
display:inline-block;
}
.box{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
#two{
top:20px;
left:20px;
background:green;
position:fixed;
}
</style>
</head>
<body>
<h2>fixed positioning</h2>
<div class="parent">
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class="box" id="three">three</div>
</div>

</body>
</html>
absolute positioning
 The absolute positioning is used to position an element relative to the first
parent element that has a position other than static.
 The box is taken out of the normal flow the box position is specified with the
top,right,bottom,left.
 Relative-position: places an element relative to its current position with out
changing the layout around it.
 absolute-position: places an element relative to its current position changing the
layout around it.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
border: 3px black dotted;
display:inline-block;
}
.box{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
#two{
top:20px;
left:20px;
background:green;
position:absolute;
}
</style>
</head>
<body>
<h2>absolute positioning</h2>
<div class="parent">
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class="box" id="three">three</div>
</div>
</body>
</html>
Sticky positioning :
An element with position: sticky; is positioned based on the user's scroll
position.
A sticky element toggles between relative and fixed, depending on the scroll
position.
 It is positioned relative until a given offset position is met in the viewport -
then it "sticks" in place (like position:fixed).
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: red;
border: 2px solid green;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px"> This is CSIT
</div>
</body></html>

You might also like