[This is the 11th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge]

The POSITION attribute in CSS is used to specify the type of the element positioning method (static, relative, Absolute, fixed, or sticky).

Static position: static position

This attribute is not positioned by default for HTML elements, an element is not positioned in any particular way, it is always positioned according to the normal flow of the page.

Under this attribute, the attribute values top, left, right, bottom, and Z-index have no effect on HTML elements.

<div class="parent">
    <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
    .parent {
        width: 480px;
        height: 320px;
        background-color: #008800;
    }
    .child {
        width: 240px;
        height: 160px;
        background-color: #ff0000;
    }
    .sibling {
        width: 240px;
        height: 160px;
        background-color: #0000ff;
    }
</style>
Copy the code

The effect is as follows:

Why use it? The only reason to set an element to Position: static is to force the removal of certain positions applied to elements that you cannot control.

Relative position: relative

This attribute locates an element according to its current position, relative to its normal position, without changing the layout.

Position: relative Puts an element relative to its current position without changing the layout around it.

Under this attribute, setting the top, right, bottom, and left attributes of a relative positioning element causes it to be adjusted away from its normal position.

<div class="parent">
    <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
    .parent {
        position: relative;
        width: 480px;
        height: 320px;
        background-color: #008800;
        z-index: 5;
        left: 50px;
        top: 50px;
    }
    .child {
        width: 240px;
        height: 160px;
        background-color: #ff0000;
    }
    .sibling {
        width: 240px;
        height: 160px;
        background-color: #0000ff;
    }
</style>
Copy the code

The effect is as follows:

Why use it? This attribute introduces the ability to use z-index on the element, which doesn’t really work for elements that are positioned statically: static.

Absolute position: Absolute

This attribute is the position relative to the nearest parent element, and if the absolute positioning element has no located parent element, it will use the document body and move as the page scrolls. Position: Absolute Places an element relative to its parent element and changes the layout around it.

The tradeoff with absolute positioning is that these elements are removed from the element flow of the page, and elements with this type of positioning are not affected by other elements, nor do they affect other elements.

<div class="parent">
    <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
    .parent {
        position: relative;
        width: 480px;
        height: 320px;
        background-color: #008800;
    }
    .child {
        position: absolute;
        width: 240px;
        height: 160px;
        background-color: #ff0000;
        left: 20px;
        top: 20px;
        z-index: 2;
    }
    .sibling {
        position: absolute;
        width: 240px;
        height: 160px;
        left: 100px;
        top: 100px;
        background-color: #0000ff;
        z-index: 1;
    }
</style>
Copy the code

The effect is as follows:

Under this attribute, for the same parent element, the z-index value is the highest.

An absolute locating element locates itself relative to its most recently locating ancestor. Once it finds a located ancestor, the positions of elements above that ancestor are no longer relevant.

The main difference between relative and absolute positioning is that position: Absolute takes a child element completely out of the normal flow of the document, and that child element will be positioned relative to the first parent element that has its own set of positions.

Fixed position: fixed

In contrast to windowing positioning, the page always stays in the same position even as it scrolls. Fixed positioning elements do not leave gaps in the page where they are located, and other elements fill in the gaps.

<div class="parent">
    <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
    .parent {
        position: relative;
        width: 480px;
        height: 320px;
        background-color: #008800;
    }
    .child {
        width: 240px;
        height: 160px;
        background-color: #ff0000;
        left: 20px;
        top: 20px;
        z-index: 2;
    }
    .sibling {
        position: fixed;
        width: 240px;
        height: 160px;
        right: 50px;
        bottom: 50px;
        background-color: #0000ff;
        z-index: 1;
    }
</style>
Copy the code

The effect is as follows:

Sticky positioning position: sticky

Positioning based on the user’s scrolling position, switching between relative and fixed according to the scrolling position. Position relative until a given offset position is encountered in the window, and then it is fixed in place, as in position: fixed.

Position: The sticky element is positioned according to the normal document flow, Then relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor) including table-related elements, The offset is based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

About sticky positioning application scenarios, can refer to the CSS | magnetic field header and footer of the form “.