CSS Positioning Property
- Introduction to CSS Position Property
- CSS position static property
- CSS position relative property
- CSS position fixed property
- CSS position absolute property
Introduction to CSS Position Property
Whenever you do complex designing of your web page, you need to position different HTML elements in the right order for better user experience.
Normally when you create a webpage, you create one element after another. These elements display in the same order in which you have created them. This is a simple web designing. The design of any webpage is important for attracting the user. Therefore, it is important to design a webpage in detail.
Normally when you create a webpage, you create one element after another. These elements display in the same order in which you have created them. This is a simple web designing. The design of any webpage is important for attracting the user. Therefore, it is important to design a webpage in detail.
It is not necessarily the element which you have created before will display above and the element which created after will display below. It may be, you want to show an element in a different position.
CSS provides position property to position HTML elements as required. This property provides you the ability to make HTML elements any position in the entire webpage.
The CSS position property can have four possible values.
- static
- relative
- fixed
- absolute
The general syntax of CSS position property has been given below.
position: static | relative | fixed | absolute;
Let's now try to know about different positioning by position property.
CSS Static Positioning
By default all the positions of the HTML elements are static. When you define a position static of an HTML element, that element remains at its normal position. An example of this has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
p, div
{
width: 25%;
}
div
{
border: 3px solid red;
position: static;
}
</style>
</head>
<body>
<p> This is a paragraph. This paragraph will show up in the web page because it has been created first. </p>
<div>
This is a Div element because its position has been defined static. So this will show in the web page after the paragraph. It is also its default position.
</div>
p, div
{
width: 25%;
}
div
{
border: 3px solid red;
position: static;
}
</style>
</head>
<body>
<p> This is a paragraph. This paragraph will show up in the web page because it has been created first. </p>
<div>
This is a Div element because its position has been defined static. So this will show in the web page after the paragraph. It is also its default position.
</div>
</body>
</html>
The above script will generate the below output.
CSS Relative Positioning
When you define the position relative to an element, the new position is defined in the context of the original position of that element.
For example, if you have created a div, you can define a new position in relation to its default position by relative position. Suppose you want to move div 20 pixels right from its normal position, then you add 20px to the left.
If you want to move the div from its normal position to the left then its right value gives 20px. If you want to move left, you can also give the negative value of the left.
Left, right, top and bottom properties are used to move the element relative to all sides. It has been explained through the below example.
<!DOCTYPE html>
<html>
<head>
<style>
p, div
{
width: 25%;
}
div
{
border: 3px solid red;
position: relative;
right: -50px;
}
</style>
</head>
<body>
<p>
This is a normal paragraph. The position of this paragraph is normal. </p>
<div>
This is a div. It has been moved from its original position to 10 pixel right with CSS relative positioning.
</div>
p, div
{
width: 25%;
}
div
{
border: 3px solid red;
position: relative;
right: -50px;
}
</style>
</head>
<body>
<p>
This is a normal paragraph. The position of this paragraph is normal. </p>
<div>
This is a div. It has been moved from its original position to 10 pixel right with CSS relative positioning.
</div>
</body>
</html>
The above script will generate the below output.
CSS Fixed Positioning
When the position of an element is defined fixed, the element gets fixed on that position and does not disappear even when scrolling.
You may have seen on side of many websites that the social media button does not disappear even when scrolling. This is because their position is fixed.
Position fixed is defined in the context of the viewport (window screen). For this top, right, bottom and left properties are used. The value of these properties you can give positive and also you can give negative. An example of this has been given below.
The above script will generate the below output.
<!DOCTYPE html>
<html>
<head>
<style>
p, div
{
width: 25%;
}
div
{
border: 3px solid red;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
It is fixed in the top left corner of the div screen. It will not disappear even on scrolling because the position of this div is fixed.
</div>
<br><br>
<p>This is a paragraph1 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph2 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph3 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph4 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph5 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph6 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph7 which is not fixed it is scrallable.</p>
p, div
{
width: 25%;
}
div
{
border: 3px solid red;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
It is fixed in the top left corner of the div screen. It will not disappear even on scrolling because the position of this div is fixed.
</div>
<br><br>
<p>This is a paragraph1 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph2 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph3 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph4 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph5 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph6 which is not fixed it is scrallable.</p><br><br>
<p>This is a paragraph7 which is not fixed it is scrallable.</p>
</body>
</html>
The above script will generate the below output.
CSS Absolute Positioning
When you define the position absolute of an element, that element is positioned in the context of its parent element. But for this, the position of the parent element should not be static.
For example, if you want to position a different div inside a div, then you can do this by absolute positioning.
Top, right, bottom, and left properties are used to define the position. An example of this has been given below.
The above script will generate the below output.
<!DOCTYPE html>
<html>
<head>
<style>
#Div1
{
width: 300px;
height: 300px;
border: 3px solid blue;
position: relative;
right: 0;
bottom: 0;
}
#Div2
{
width: 200px;
height: 200px;
border: 3px solid red;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id = "Div1">
<div id = "Div2">
</div>
</div>
#Div1
{
width: 300px;
height: 300px;
border: 3px solid blue;
position: relative;
right: 0;
bottom: 0;
}
#Div2
{
width: 200px;
height: 200px;
border: 3px solid red;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id = "Div1">
<div id = "Div2">
</div>
</div>
</body>
</html>
The above script will generate the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.