The CSS position property has seven property values: Static, Relative, Absolute, Fixed, Sticky, inherit, and Initial. This section describes the first five property values and the usage of z-index

Attribute values describe
static The default value. Without location, the element appears in normal file flow.
relative Location relative to the file stream, offset relative to the original position of the element, other elements will not be empty.
absolute Absolute positioning, out of the file stream, offset with respect to the containing element.
fixed Fixed position, similar to Absolute, contains the element browser, relative to the browser offset, page scrolling fixed to the target position
sticky Paste the combination of position, relative and fixed, offset relative to the original position, the page is fixed to the target position when scrolling.
  • When z-index elements overlap, this parameter is used to set the overlay order of elements. |

1. Static Static location

/* Default value */ is optional
position:static
Copy the code

What is Static positioning?

Static Indicates the default layout of the CSS. Document flows are arranged from top to bottom and from left to right (see the following figure).

A. relative B. relative C. relative D. relative

.box2{
    position:relative;
    left:15px;
    top:15px;
}
Copy the code

What is “relative”? The offset is relative to who?

After the default position of an element is determined, the left, right, top, and bottom attributes are used to set the offset of the element’s position. The offset is the offset relative to the original position, but the space occupied by the element remains in its original position, and other elements do not occupy the space of the element. (As shown below, box2 has been shifted 15px to the right and down, leaving box2 in its original position)

3. Absolute location

.box2{
    position:absolute;
}
Copy the code

What is absolute positioning?

Absolute Positioning moves the current element out of the normal document flow. The following element occupies the space of the current element. The current element overrides the element that occupies the space. (Box2 overlays Box3 as shown below)








The offset is relative to who?

Sets the offset of the element’s position relative to the containing element with the left, right, top, and bottom attributes.

What is an inclusion element?

  • Distance to current elementRecently,The set uppositionortransformorperspectiveThe parent element of the property isContains elements of the current element.
.container{
    position:relative;
    /*transform*/
    /*perspecitive*/
}
.box2{
    position:absolute;
    top:15px;
    left:15px;
}
Copy the code

The relative setting is usually used to contain elements, and the padding box boundary offset of box2 relative to the parent element Container

  • If all the parent elements of an element are not setpositionortransformorperspectiveProperty, then the containing element is the container containing the HTML, which is the browser window.
.box2{
   position:absolute;
   top:15px;
   left:15px;
}
Copy the code

4.fixed

What is fixed?

Similar to Absolute, it is separated from the normal document flow. Its containing element is fixed as the browser window. No matter how the page scrolls, the element is fixed in the same position, suitable for fixing floating window and navigation bar.

  • Sets the width of the element to the width of the content. You can fill the containment container with the width of the element by setting left=0, right=0, or bottom=0, top=0 to fill the containment container with the height.
.footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
}
Copy the code








5. sticky

What is sticky?

Equivalent to a combination of relative and fixed, set the relative offset of elements, and the sticky element is fixed in the browser when the page scrolls.

nav{
    position:sticky;
    top:0;
}
Copy the code

6. z-index

Z – the index is what?

By setting the value of z-index, you can set the top, bottom, upper layer, and lower layer of overlapping elements. The default value is 0 and can be set to positive or negative.

The absolute element defined after is overridden by the absolute element defined first:

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
Copy the code
box1{
    position:absolute;
}
box2{
    position:absolute;
    top:30px;
    left:50px;
}
Copy the code




Set z-index to place overridden elements at a higher level:

box1{
    position:absolute;
    z-index:5;
}
Copy the code

  • Note: If two elements are in different contain elements and both contain elements have z-indexes set, the z-indexes of the two elements depend on the contain element.