FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 795

CSS3 POSITION


2021-11-16 13:57 · 6 min read

The CSS position property is used to sets how an element is positioned in on the top, right, bottom, and left positions. CSS position properties determine the final location of positioned elements.

 

Position Property

We can use different CSS position properties on HTML elements.

  • static
  • relative
  • fixed
  • absolute
  • sticky

 

STATIC POSITION

An element with a static position is always positioned according to the normal flow of the page.

<style>
div{
position: static;
border: 3px solid #73AD21;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
p{
position: static;
border: 5px solid black;
}
</style>
</head>
<body>
<p>TDB Tutorials</p>
</body>
</html>

 

RELATIVE POSITION

An element with position: relative; is positioned relative to its normal position.
We can set the top, right, bottom, and left properties on a relatively positioned element then it will cause it to be adjusted away from its normal position. We can't fit other contents into any gap left by the element.

<style>
div{
position: relative;
right: 30px;
border: 5px solid black;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
p{
position: absolute;
border: 5px solid black;
bottom:0;left:0;
}
div{
position: relative;
height:400px;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>TDB Tutorials</p>
</div>
</body>
</html>


FIXED POSITION

An element of fixed position is always positioned relative to the viewport, means it always stays in the same position even if the page is scrolled. The four properties are used to position the element (top, right, bottom, and left). Note: You can see a pink circle in this page (bottom right cornor.). This is the example of fixed element.

 

<style>
div{
position: fixed;
bottom: 0;
right: 0;
width: 100px;
border: 5px solid black;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
body{height:1000px}
p{
position: fixed;
bottom: 0;
right: 0;
width: 100px;
border: 5px solid black;
}
</style>
</head>
<body>TDB EDITOR
<p>TDB Tutorials</p>
</body>
</html>

 

ABSOLUTE POSITION

When we use top, right, bottom, and left position properties on an element of absolute position, it's always positioned with respect to its parent element.

 

<style>
.parent-class{
position: relative;
right: 30px;
border: 5px solid black;
width:200px;
height:200px;
}
.child-class{
position: absolute;
top: 20px;
left:20px;
width: 50px;
height: 50px;
border: 5px solid red;
}
</style>


Create a div element of the class name parent and create an element inside it with the class name child. Now try it run the code.

 

<!DOCTYPE html>
<html>
<head>
<style>
.parent{
position: relative;
border: 5px solid black;
width:200px;
height:200px;
}
.child{
position: absolute;
top: 20px;
left:20px;
width: 50px;
height: 50px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent"><div class="child"></div></div>
</body>
</html>

 

STICKY 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 top place.

<style>
div{
/* Safari */
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: green;
border: 5px solid black;
}
</style>

Note: Not supported by Internet Explorer, Edge 15, and earlier versions.

 

<!DOCTYPE html>
<html>
<head>
<style>
body{height:1000px}
div{
/* Safari */
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
border: 5px solid black;
}
</style>
</head>
<body>
Simple example of sticky position.<br>
Tdb Editor
<div>TDB Tutorials</div>
</body>
</html>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer