Example Analysis of four attributes in CSS Positioning
This article shares with you the content of an example analysis of four attributes in CSS positioning. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
CSSposition attribute
There are four attributes in total:
Static
The default value, which is normally the attribute, usually does not have to be written.
Relative
Offset the elements, use top,right,left,bottom for offset, and use z-index to separate layers.
Div {
Float:left
Width:100px
Height:100px
Background:pink
Text-align:center
Line-height:100px
Margin-left:10px
}
.box {
Position:relative
Top:20px
Left:20px
}
one
two
three
Winston
Relative is offset on its own basis. That is, relative to their own position.
Absolute
Relative to the body or relative to the parent element that has been positioned closest to you.
.box1 {
Width:100px
Height:100px
Background:red
Position:absolute
Top:100px
Left:250px
}
.box2 {
Width:200px
Height:200px
Background:pink
Position:relative
Top:10px
}
.box3 {
Width:100px
Height:100px
Background:blue
Position:absolute
Top:50px
Left:50px
}
one
twenty-three
Winston
Fixed
The fixed positioning assignment is always positioned at the top left of the browser's window. No matter how much the mouse rolls, it is positioned at the top left of the browser window after you move it. Like many official websites, the navigation bar uses a fixed positioning, so that it has been at the top to feel the peak of loneliness.
Note: these three positioning will be separated from the document stream, the use should be appropriate!
Thank you for reading! This is the end of this article on "sample analysis of four attributes in CSS positioning". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
