A detailed explanation of the hierarchical relationship caused by the position of CSS

Time:2020-7-30

Absolute, relative and fixed in position

  1. Absolute positioning: absolute positioning. Use top, bottom, left and right to locate according to the parent element with location. If there is no positioning, it is relative to the body element, that is, the whole page document.
  2. Relative: relative positioning, positioning relative to their original position
  3. Fixed: absolute positioning, positioning relative to the browser window (fixed positioning will keep the element in a certain position in the browser and will not change with the scrollbar scrolling)

The hierarchy problem caused by position

First of all, we should know that CSS attribute is actually a three-dimensional space with X, y, z-axis, but only when we use position positioning, the hierarchical relationship on z-axis is reflected, that is, Z-index is only available for positioning elements. Now let’s analyze these hierarchical relationships.

The hierarchical relationship is as follows:

  • The Z-index attribute is only available for location elements
  • The default level of the element with location attribute is 0. If the level is the same, the following element will occupy the upper position, and Z can be understood- index:0+
  • The element located by absolute will make the following element Y move upward. It can be understood that the element becomes a row level element after absolute positioning
  • The larger the value of Z-index, the closer it is to our observer, such as Z- index:2 At Z- index:1 The upper layer of

Only the positioning elements of brotherhood can compare levels

Let’s analyze the points listed above

Analyze the first point


<style>
.c1{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
}
.c2{
    width: 200px;
    height: 100px;
    background-color: rgb(0, 0, 255);;
    position: absolute;
    top: 50px;

           }
</style>
<body> 
        <div class="c1">c1</div>
        <div class="c2">&nbsp&nbsp&nbsp&nbspc2</div>
</body>

At this point, C2 has a higher level and should be stacked above C1

Analyze the second point


<style type="text/css">
           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

           }
           .c2{
                width: 200px;
                height: 100px;
                backgr

At this point, the positioning elements have levels, and the following elements are on top of them

Analyze the third point


<style type="text/css">
         .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

At this time, C3 will directly cover C2, because C2 is located in absolute, and the elements below will move to C2. From the second point, we can see that C3 is above C2, so C3 directly covers C2

Analyze the fourth point


<style type="text/css">
         .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

C1 and C2 are positioning elements, and Z is the default- index:0 Set the Z-index of C1 to 1, so that C1 will be above C2

Analyze the fifth point


<style type="text/css">
           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

           }
           .c2{
                width: 200px;
                height: 100px;
                background-color: rgb(0, 0, 255);;
                position: absolute;
                z-index: 1;
           }
</style>
<body>
        <div class="c2">
            &nbsp&nbsp&nbsp&nbspc2
            <div class="c1">c1</div>
        </div>
</body>

Put C1 in C2. Even if the Z-index of C2 is set to 1, C1 is still above C2. This shows that nested elements have no hierarchical relationship, only sibling elements have hierarchical relationship

 

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.