Research on the value of position attribute in CSS (summary)

The CSS position attribute specifies the element's positioning type, and then uses top, bottom, left, and right to position it specifically.

The position attribute must be used before specific positioning, otherwise all specific positioning attributes will not take effect.

There are five possible values for position: static, relative, absolute, fixed, or sticky.

Below, the blogger will explain the comparison of codes and running results one by one

First, the position attribute is not set. You can see that the top attribute of the two elements is not effective, while the color attribute is effective. The current position is the position in the default document flow. This is used as a prototype to compare the changes in element position when the position is changed.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="./j.css">

</head>

<body>

    <div class="box" id="one">One</div>

    <div class="box" id="two">Two</div>

    <div class="box" id="three">Three</div>

    <div class="box" id="four">Four</div>  

</div>

</body>

</html>

.box {
    display: inline-block;

    background: red;
    color: white;
  }
  
  #two {
    top: 260px;
    bottom: 126px;
    left: 20px;
    background: blue;
  }

position：static

Add position: static; to the #two class as follows (only the position value is modified in each subsequent place)

#two {
    position:static;
    top: 260px;
    bottom: 126px;
    left: 20px;
    background: blue;
  }

The default value for an HTML element is that it has no positioning and appears in the normal flow.

Statically positioned elements are not affected by top, bottom, left, or right.

Since this value will invalidate the positioning attribute, what is the meaning of its existence?

During the process of modifying the web page style, you can temporarily block the position information of certain elements, or retain the position information of certain parts during modification to facilitate recovery.

position：relative

Relative positioning is positioning relative to the original normal document flow, but the original page layout is not changed during positioning. It is equivalent to just moving the positioned element, and the moved comparison standard position is the position in the normal document flow, and the original position will be left blank.

position: absolute

With absolute positioning, the element is removed from the normal document flow and does not create space for elements in the page layout. It is positioned relative to the most recently positioned parent element. In this example, the positioning is based on the body element.

position: fixed

Fixed positioning is similar to absolute positioning in that it will be deleted from the normal document flow and will not create space for elements in the page layout. The difference is that it is fixed to the viewport and is positioned based on the viewport. I believe everyone has had this experience when browsing many web pages. There will be advertisements on the top or bottom of the web page that will not move with the scrolling of the web page. They are fixed on the web page, and if the z-index is not set to modify the stacking order, they will cover the content of the web page.

position: sticky

The element does not leave the document flow and still retains its original position in the document flow.

When the element is scrolled beyond the specified offset value in the container, the element is fixed at the specified position in the container. That is, if you set top: 20px, then when the sticky element reaches a position 50px from the top of the relatively positioned element, it is fixed and no longer moves upward.

The fixed relative offset of an element is relative to the parent element with the scroll box closest to it. If the parent element cannot be scrolled, the offset of the element is calculated relative to the viewport.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Docker builds kubectl image implementation steps

>>: Beginners learn some HTML tags (3)