Detailed introduction to CSS positioning attribute (with examples)

Foreword: In the process of using CSS to layout and beautify the page, the position attribute is often used. So, next we will introduce the position attribute in detail.

Recommended video tutorial: css video tutorial

First, we write an HTML file and use css to vertically center multi-line content.

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

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 declaration

2, if two adjacent elements have margins set, then the final outer margin Margin = the largest of the two margins

3, an element with fixed width and height values, if the left and right margins are set to auto, the left and right margins will automatically expand to occupy Full remaining width, the effect is that the block is horizontally centered

2. Relative positioning relative

Function: Make the element a positionable ancestor Element

Features:

1, you can use top/right/bottom/left/z-index for relative positioning, relative elements are naturally The position in the flow

2, the position of relatively positioned elements in the natural flow will be retained

3, any element can be set It is relative, and its absolutely positioned descendants can be absolutely positioned relative to it

4, and the floating elements can be offset (to solve the problem of setting t/r/b for two floating elements) /l invalid problem), and control their stacking order

3. Absolute positioningabsolute

Function: Make elements break away from the natural flow

Features:

1, break away from natural flow

2, set the percentage ratio of size It is the nearest positionable ancestor element

3. If lrtb is set to 0, it will be aligned to all sides of the nearest positionable ancestor element (derived from the horizontal and vertical centering trick)

4. If there is no recent positionable ancestor element, it will be regarded as a positionable ancestor element.

5, z-index can control the stacking order

4. Fixed positioning fixed

##Function: Similar to absolute positioning

Features:

1, Positioning relative to the browser viewport

2, Fixed positioning elements will not scroll as the viewport scrolls

3, inherit the characteristics of absolue

Use position to achieve vertical centering of child elements

<div class="wrap">
    <div class=""content></div>
</div>

.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: auto auto;
}

The above is the detailed content of Detailed introduction to CSS positioning attribute (with examples). For more information, please follow other related articles on the PHP Chinese website!