Position Property in CSS
CSS Layout - The Position Property
The
position property specifies the type
of positioning method used for an element .
There are five different
position values:
staticrelativefixedabsolutesticky
Elements are then positioned using the top, bottom, left, and
right properties. However, these properties will not work unless the
position property is set first. They
also work differently depending on the position value.
position: static;
HTML
elements are by default positioned static. The static elements are not affected by the top, bottom, left, and
right properties. Here the div tags are placed in the
HTML one after another. They stack up in order on the page, each one beneath
the previous. It is
always positioned according to the normal flow of the page.
This
element has position: static;
Here
is the CSS that is used:
div.static1 {
position: static;
border: 3px solid #73AD21;
}
position: static;
border: 3px solid #73AD21;
}
div.static2 {
position: static;
border: 3px solid #2273AD;
}
position: static;
border: 3px solid #2273AD;
}
div.static3 {
position: static;
border: 3px solid #73AD57;
}
position: static;
border: 3px solid #73AD57;
}
 |
| Position Static |
position: relative;
An element
with
position:
relative; is
positioned relative to its normal position. Relative
to the placement of the element within the flow of
the document. Here the div tags are placed in the
HTML one after another. Box2 has position relative and values for top and left
applied. Setting the 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.
This
element has position: relative;
<!DOCTYPE
html>
<html>
<head>
<title>This
is a demo page</title>
<style
type="text/css">
div.box1 {
border: 3px solid #73AD21;
width:300px;
}
div.box2 {
position: relative;
border: 3px solid #2273AD;
width:300px;
left:20px;
top:20px;
background-color:red;
}
div.box3 {
border: 3px solid #73AD57;
width:300px;
}
p{
text-align:center;
}
</style>
</head>
<body>
<div
class="box1"><p>Box1</p></div>
<div
class="box2"><p>Box2</p></div>
<div
class="box3"><p>Box1</p></div>
</body>
</html>
 |
| Position Relative |
position: fixed;
An element with
position:
fixed; is positioned
relative to the viewport(browser window), which means it always stays in the
same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
<!DOCTYPE html>
<html>
<head>
<title>This is a demo page</title>
<style type="text/css">
div.box1 {
border: 3px solid #73AD21;
width:300px;
}
div.box2 {
position: fixed;
border: 3px solid #2273AD;
width:100px;
left:0px;
top:0px;
background-color:red;
}
div.box3 {
position:relative;
border: 3px solid #73AD57;
width:300px;
}
p{
text-align:center;
}
</style>
</head>
<body>
<div class="box1"><p>Box1</p></div>
<div class="box2"><p>Box2</p></div>
<div class="box3"><p>Box1</p></div>
</body>
</html>
This
element has
position: fixed; |
| Position Fixed |
position: absolute;
It removes the element
from the normal flow of content and allows it to be positioned in relation to
the HTML document. Box3 moves up to occupy the space
vacated by box2, and box2 takes an absolute position with respect to the HTML
document. An Absolute positioned elements will scroll with the page.
<!DOCTYPE html>
<html>
<head>
<title>This is a demo page</title>
<style type="text/css">
div.box1 {
border: 3px solid #73AD21;
width:300px;
}
div.box2 {
position: absolute;
border: 3px solid #2273AD;
width:200px;
left:100px;
top:200px;
background-color:red;
}
div.box3 {
position:relative;
border: 3px solid #73AD57;
width:300px;
}
p{
text-align:center;
}
</style>
</head>
<body>
<div class="box1"><p>Box1</p></div>
<div class="box2"><p>Box2</p></div>
<div class="box3"><p>Box1</p></div>
</body>
</html>
Note: A
"positioned" element is one whose position is anything except
static.
position: sticky;
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). At the end of
the sticking area, the element stops and stacks on top of the other element,
much like an absolutely positioned element behaves inside a position: relative container.
!DOCTYPE html>
<html>
<head>
<title>This is a demo
page</title>
<style
type="text/css">
.container {
display: flex;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 1000px;
background: rgba(114, 186, 94, 0.05);
}
.pirate {
position: -webkit-sticky;
position: sticky;
top: 4rem;
}
.police {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.doctor {
position: -webkit-sticky;
position: sticky;
bottom: 1rem;
align-self: flex-end;
}
</style>
</head>
<body>
<div
class="container">
<div class="item pirate">
<img src="pirate.svg" width="100"
alt="Item 1">
</div>
<div class="item police">
<img src="police.svg" width="100"
alt="Item 2">
</div>
<div class="item cowboy">
<img src="cowboy.svg" width="100"
alt="Item 3">
</div>
<div class="item doctor">
<img src="doctor.svg" width="100"
alt="Item 4">
</div>
</div>
</body>
</html>
 |
| Position Sticky |
Overlapping Elements
When
elements are positioned with different attribute values, they can overlap other elements. The
z-index property specifies the stack order of an element which means
the z-index decides which element should be placed in front of, or behind, the
others. An element can have a positive or negative stack order. If z-index of
an element is -1 then it would be placed behind the other element
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left:
0px;
top:
0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="w3css.gif"
width="100" height="140">
<p>Because the image has a
z-index of -1, it will be placed behind the heading.</p>
</body>
</html>
An
element with greater stack order is always in front of an element with a lower
stack order.
 |
| Z-Index |
Note: If two positioned elements
overlap without a
z-index specified, the element
positioned last in the HTML code will be shown on top.
Comments
Post a Comment