Example Analysis of CSS locating position attribute
This article mainly shows you the "CSS positioning position attribute example analysis", the content is easy to understand, clear, hope to help you solve the doubt, the following let the editor lead you to study and study the "CSS positioning position attribute example analysis" this article.
First of all, let's write a HTML file and use css to center multiple lines of content vertically.
Helloworld
HELLOWORLD
Cascading style sheet
Next we use css for layout and typesetting:
.wrap {
Width:100%
Height:400px
Display:table
}
.content {
Display:table-cell
Vertical-align:table
Text-align:center
}
Position attribute:
Static positioning / conventional positioning / natural positioning static
Function: position the element in the natural flow
Features:
1. Ignore top, bottom, left, right or z-index declarations
2. If the outer margin of two adjacent elements is set, then the final outer margin = the largest of the two
3. For elements with fixed width and height values, if the left and right margin is set to auto, the left and right margin will automatically expand to occupy the remaining width, resulting in the horizontal center of the block.
Second, relative positioning relative
Function: to make an element a locatable ancestor element
Features:
1. Top/right/bottom/left/z-index can be used for relative positioning, relative to the position of elements in the natural flow.
2. The position of the relative positioning element in the natural flow will be retained.
3. Any element can be set to relative, and its absolute positioning offspring can be absolutely positioned relative to it.
4. You can offset floating elements (solve the problem that two floating elements are invalid in setting t/r/b/l), and control their stacking order
3. Absolute positioning absolute
Function: to detach elements from natural flow
Features:
1. Break away from natural flow
2. Setting the percentage ratio of the size is the nearest locatable ancestor element.
3. If lrtb is set to 0, it will be aligned to the edges of the nearest locatable ancestor element (derived horizontal and vertical center)
4. If there is no nearest locatable ancestor element, it will be recognized as a locatable ancestor element
5. Z-index can control the stacking order
4. Fixed positioning fixed
Function: similar to absolute positioning
Features:
1. Position relative to the browser viewport
2. Fixed positioning elements will not scroll as the viewport scrolls
3. Inherit the characteristics of absolue
Using position to realize the vertical centering of child elements
.wrap {
Width:200px
Height:200px
Background:blue
Position:relative
}
.content {
Width:100px
Height:100px
Background:red
Position:absolute
Top:0
Bottom:0
Left:0
Right:0
Margin:autoauto
}
The above is all the content of the article "sample Analysis of CSS locating position attributes". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
