What are the three positioning methods of css

The three positioning methods of css are: 1. Relative positioning, the position of the element is calculated relative to its original position, the syntax "position:relative;"; 2. Fixed positioning, the syntax "position:fixed ;"; 3. Absolute positioning, syntax "position:absolute;".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Relative positioning

The element's position is calculated relative to its original position.

position:relative;

It refers to the original point of the parent as the original point by default, and is positioned with top, right, bottom, and left.

       
 
one
 
two
 
three
 
four
 
  

Fixed positioning

Fixed elements will not change position as the scroll bar is dragged.

position:fixed;

By default, the position of the fixed positioning element is relative to the browser, and is used in conjunction with the four attributes of top, bottom, left and right.

       
div元素
 
固定定位的div元素
  

Absolute positioning

position:absolute;

By default, the absolute positioning position is relative to the browser, with top, right, and bottom , left for positioning.

       
 
one
 
two
 
three
 
four
 
  

z-index

The z-index property sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

• Elements can have negative z-index attribute values.
• Z-index only works on positioned elements (such as position:absolute;)

Attribute value: auto: By default, the stacking order is equal to the parent element. number: Set the stacking order of elements. inherit: Specifies that the value of the z-index attribute should be inherited from the parent element.

Example: Set the z-index of the image:

img{ position:absolute; left:0px; top:0px; z-index:-1; }

(Learning video sharing:css video tutorial)

The above is the detailed content of What are the three positioning methods of css. For more information, please follow other related articles on the PHP Chinese website!