CSS position setting how elements are positioned

First, Introduction

The Position property of CSS sets how elements are positioned, defining positioning rules for the element to be positioned. This property is useful for scripting animation effects.

1. Positioning elements (positioned element) are the elements of the post-computed position attribute: relative (relative), Absolute (absolute), fixed (stationary), or sticky (sticky).

2, top, right, bottom, left properties specify the position of the anchor element.

3, Z-index set the stacking order of the positioning elements, that is, the position of the Z axis, the value can be positive negative numbers, the greater the value of the closer to the user (that is, the higher the level of the display), the smaller the value away from the user.

when the value of Z-index is-1, the position of the picture is at the bottom of the text, far from the user, and if the value of Z-index is set to a positive number, the position of the picture is displayed above the text, covering some text!

And if the value of Z-index is set to positive, the position of the picture is displayed above the text, covering some text! left:20px; is the distance from the left border of the picture is 20px; top:20px is the distance from the top of the picture is 20px

Second, take the value

Static

This keyword makes this element use normal behavior, that is, the element is in the document flow its current layout position, top, right, bottom, left and Z-index properties are invalid.

Relative

Use this keyword to lay out elements as if this element had not been set to position. It adapts to the position of the element and does not change the layout (this leaves a blank space where the element originally resides). Position:relative to Table-*-group, Table-row, Table-column, Table-cell, table-caption invalid.

Absolute

No space is reserved for the element, and the element position is determined by specifying its offset from the ancestor of its nearest non-static location. An absolutely positioned element can set margins (margins) and is not merged with other margins.

Fixed

No space is reserved for elements. Specifies the space of an element by specifying its position relative to the screen window, and the position of the element does not change when the screen scrolls. The elements appear in a fixed position on each page as they are printed. The fixed property typically creates a new stack environment.

Above this CSS position set element positioning method is a small part of the whole content to share to everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.