In CSS, the `position` property can take on the values of `absolute` and `relative`. The main difference between these two values is the way in which they are positioned on the page.
Position 'absolute'
`absolute` positioning: An element with `position: absolute` is positioned with respect to its closest positioned ancestor (if any). If there is no positioned ancestor, it will be positioned with respect to the initial containing block. You can then use the `top`, `right`, `bottom`, and `left` properties to specify the element's position.
Position 'relative'
`relative` positioning: An element `position: relative` is positioned relative to its normal position in the document. You can then use the `top`, `right`, `bottom`, and `left` properties to specify how the element should be offset from its normal position.
Here is an example to illustrate the difference between `absolute` and `relative` positioning:
#parent {
position: relative;
}
#child {
position: absolute;
top: 10px;
left: 20px;
}
In this example, the element with an ID of "child" will be positioned 10 pixels from the top and 20 pixels from the left of the element with an ID of "parent", because "child" is absolutely positioned and "parent" is relatively positioned. If "parent" had been absolutely positioned, "child" would have been positioned with respect to the initial containing block instead.
(0)
Login first for like post.
Comments (0)