Positioning in CSS
When we create a webpage, many elements are shown in the same order in which we have created them and each element has a default position too. But if we want, we can set the status of those elements accordingly. For this, we use the position property.
Different properties of Position Property -
static
relative
fixed
absolute
1) position: static;
HTML elements by default position are static. If we set the static position of an element, then it will not make any difference. It will display only according to the normal flow of the element page.
Note: - do not work on top, left, right, bottom, static elements.
2) position: relative;
When we set the relative position of an element, then we can give that element a new position which is defined in respect to its original position. For example, If we have a <div> and we want to move it from its normal position to 20px right then we will give it position property and will give the relative value of the position and use the left property.
<style>
div {
position: relative;
left: 20px;
border: 1px solid red;
}
</ style>
<body>
<div> This is a box </ div>
 |
| Positioning-in-CSS |
Here we have used the left property because we wanted to divide this div from 20px to the left. If we have to move it right then the right property will use the bottom property to move from top to bottom to move from the top.
3) position: fixed;
If the position of an element is set to fix, then the element gets fixed and even if scrolling the page does not move from its place. When we set the position 'fixed' of an element, it is defined in respect of viewport or screen.
4) position: absolute;
If we want to position an element in relation to its parent element, then we use absolute positioning. For example, If we have a div inside a div, and we want to give the inside div a position with respect to the outside div, then use absolute positioning.
Note: - If an element has to give an absolute position then its parent element's position should be relative.
For example
<style>
#one {
width: 400px;
height: 400px;
border: 1px solid green;
position: relative;
}
#two {
position: absolute;
height: 15px;
width: 150px;
border: 1px solid blue;
left: 50px;
}
<body>
<div id = "one">
<div id = "two"> </ div>
</ div>
</ body>
 |
| Positioning-in-CSS-2 |
No comments:
Post a Comment