Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.