Detailed explanation of the hierarchical relationship problem caused by CSS positioning

Detailed explanation of the hierarchical relationship problem caused by CSS positioning

Absolute, relative and fixed in position positioning

  1. absolue: Absolute positioning, using top, bottom, left and right to position according to the parent element with positioning. If there is no parent element, it is positioned relative to the body element, that is, the entire page document.
  2. Relative: Relative positioning, positioning relative to its 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 as the scroll bar scrolls)

Hierarchical relationship problems caused by position

First of all, we need to know that the CSS attribute is actually a three-dimensional space with x, y, and z axes, but the hierarchical relationship on the z-axis is only reflected when we use position positioning, that is, the z-index attribute is only available for positioned elements. Now let's analyze these hierarchical relationships.

The hierarchical relationship is as follows:

  • The z-index property is only available for positioned elements
  • The default level of an element with a positioning attribute is 0. If the levels are the same, the following element is on top, which can be understood as z-index: 0+
  • The absolutely positioned element will move the y-axis of the following element upwards. It can be understood that after absolute positioning, the element becomes a row-level element.
  • The larger the z-index value, the closer it is to our observer, for example, z-index: 2 is on the upper layer of z-index: 1

Only sibling positioning elements can compare levels

Let’s analyze the points listed above:

Let’s 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&nbsp&nbspc2</div>
</body>

At this time, c2 is at a higher level and should be stacked on top of c1.

Let’s 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;
                back

At this time, the positioned elements have a hierarchy, and the following elements are on top

Let’s 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's positioning is absolute, and the following elements will move to c2. From the second point, we can see that c3 is above c2, so c3 directly covers c2.

Let’s 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 both positioned elements, with a default z-index of 0. Set c1's z-index to 1 so that c1 is above c2.

Let’s 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&nbsp&nbspc2
            <div class="c1">c1</div>
        </div>
</body>

Put c1 inside c2. Even if the z-index of c2 is set to 1, c1 is still above c2, which means that nested elements have no hierarchical relationship. Only sibling elements have a hierarchical relationship.

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.

<<:  Introduction to the use of the indeterminate property of the checkbox

>>:  What should I do if I can't view the source file of a web page?

Recommend

Nginx merges request connections and speeds up website access examples

Preface As one of the best web servers in the wor...

Summary of 10 common HBase operation and maintenance tools

Abstract: HBase comes with many operation and mai...

In-depth understanding of MySQL global locks and table locks

Preface According to the scope of locking, locks ...

Two ways to configure Vue global methods

Table of contents 1. Introduction 2. The first me...

MySQL Tutorial: Subquery Example Detailed Explanation

Table of contents 1. What is a subquery? 2. Where...

Specific operations of MYSQL scheduled clearing of backup data

1|0 Background Due to project requirements, each ...

How to generate Hive table creation statement comment script in MySQL metadata

Preface This article mainly introduces the releva...

Introduction to the use of the indeterminate property of the checkbox

When we use the folder properties dialog box in Wi...

MYSQL transaction tutorial Yii2.0 merchant withdrawal function

Preface I am a PHP programmer who started out as ...

The implementation of Youda's new petite-vue

Table of contents Preface Introduction Live Easy ...

CSS to achieve fast and cool shaking animation effect

1. Introduction to Animate.css Animate.css is a r...

VMware vCenter 6.7 installation process (graphic tutorial)

background I originally wanted to download a 6.7 ...

Centos7 configuration fastdfs and nginx distributed file storage system implementation process analysis

1. Install libfastcommon-1.0.43. The installation...

vue-pdf realizes online file preview

This article example shares the specific code of ...

Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud

1. Environmental Preparation CentOS Linux release...