How to use absolute in css
Today, the editor will share with you the relevant knowledge points about how to use absolute in css. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
1 、 absolute
The element that generates absolute positioning is positioned relative to the first parent element other than static positioning. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.
Code example:
Example of using absolute
H4.abs
{
Position:absolute
Left:50px
Top:50px
}
Absolute positioning (absolute)
With absolute positioning, elements can be placed anywhere on the page. In this example, the following elements are 50px from the left and top of the page.
2 、 fixed
Generates an absolutely positioned element, positioned relative to the browser window. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.
Code example:
Example of using fixed
P.a1
{
Position:fixed
Left:10px
Top:10px
}
P.a2
{
Position:fixed
Top:50px
Right:50px
}
Fixed example: this element is relative to the browser window, from the top 10px, from the left 10px
Fixed example: this element is relative to the browser window, from the top 50px, from the right 50px
3 、 relative
The relative positioning element is generated and positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the LEFT position of the element.
Code usage example:
Relative
H4.le
{
Position:relative
Left:-30px
}
H4.ri
{
Position:relative
Left:40px
}
Elements in normal position
This element moves to the left relative to its normal position
This element moves to the right relative to its normal position
Relative positioning moves the element according to its original position.
In this case, "left:-30px" subtracts 30 pixels from the original left position of the element.
In this case, "left:40px" adds 40 pixels to the original left position of the element.
These are all the contents of the article "how to use absolute in css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
