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

Pure CSS to change the color of the picture

The css technique for changing the color of an im...

Detailed explanation of vue3 cache page keep-alive and unified routing processing

Table of contents 1. Introduction 2. Use 1. Diffe...

Mini Program to implement Token generation and verification

Table of contents process Demo Mini Program Backe...

MySQL table name case selection

Table of contents 1. Parameters that determine ca...

What you need to know about msyql transaction isolation

What is a transaction? A transaction is a logical...

MySql 5.7.21 free installation version configuration method under win10

1. Unzip to the location where you want to instal...

Some issues we should pay attention to when designing a web page

Web design, according to personal preferences and ...

How to install tomcat in docker and deploy the Springboot project war package

It's simple, just go to the tutorial, blogger...

Introduction to the process of building your own FTP and SFTP servers

FTP and SFTP are widely used as file transfer pro...

Detailed explanation of MySQL database Event scheduled execution tasks

1. Background As the project's business conti...

A Preliminary Study on JSBridge in Javascript

Table of contents The origin of JSBridge The bidi...

Solve the problem that Docker must use sudo operations

The steps are as follows 1. Create a docker group...

Solution to secure-file-priv problem when exporting MySQL data

ERROR 1290 (HY000) : The MySQL server is running ...

Summary of Nginx location and proxy_pass path configuration issues

Table of contents 1. Basic configuration of Nginx...

Pure CSS3 to achieve beautiful input input box animation style library (Text input love)

Share a beautiful input box animation style libra...