CSS POSITION
1.The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky)
2.The position property in CSS tells about the method of positioning for an element or an HTML entity and the positioning of an element can be done using the top, right, bottom, and left properties.
2.The position property in CSS tells about the method of positioning for an element or an HTML entity and the positioning of an element can be done using the top, right, bottom, and left properties.
There are five types of position.
- Fixed position
- Static
- Relative
- Absolute
- Sticky
1.Fixed position:
Any HTML element with position: fixed property will be positioned relative to the view port.
2.static:
This method of positioning is set by default. If we don’t mention the method of positioning for any element, the element has the position.
3.Relative:
An element with position: relative is positioned relatively with the other elements which are sitting on top of it.
4.Absolute:
An element with position: absolute will be positioned with respect to its nearest Non-static ancestor.
5.Stickly:
Element with position: sticky and top:0 played a role between fixed and relative based on the position where it is placed.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> CSS Positioning Element</title>
<style>
<body>
{
margin:0;
padding:20px;
font-family:sans-serif;
background:while;
}
.fixed
{
position:fixed;
background: white;
color: white;
padding: 30px;
top:50;
left:10;
}
span
{
padding: 5px;
}
</style>
</head>
<body>
<pre>
WELCOME TO CSS
</per>
</body>
</html>
