Detailed explanation of the hierarchical relationship problem caused by CSS positioning

Absolute, relative and fixed in position positioning

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.
Relative: Relative positioning, positioning relative to its original position
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?

Using CSS3's 3D effects to create a cube

Detailed explanation of the hierarchical relationship problem caused by CSS positioning

Using CSS3's 3D effects to create a cube

Steps for docker container exit error code

CSS to achieve the transition animation effect of the picture when the mouse is placed on it

Detailed explanation of rpm installation in mysql

How to solve jQuery conflict problem

Docker practice: Python application containerization

10 very good CSS skills collection and sharing

10 kinds of loading animations implemented with CSS3, pick one and go?

jQuery clicks on the love effect

Comparison of mydumper and mysqldump in mysql

Recommend

Basic principles for compiling a website homepage

How InnoDB implements serialization isolation level

Docker starts the elasticsearch image and solves the error after mounting the directory

2 methods and precautions for adding scripts in HTML

Detailed explanation of InnoDB architecture and features (summary of InnoDB storage engine reading notes)

How to configure Openbox for Linux desktop (recommended)

WeChat applet custom bottom navigation bar component

Detailed explanation of sshd service and service management commands under Linux

Two ways to visualize ClickHouse data using Apache Superset

MySQL constraint types and examples

How to clear the validation prompt in element form validation

HTML table markup tutorial (2): table border attributes BORDER

How to handle long data when displaying it in html

Complete step record of Vue encapsulation of general table components

Steps to transplant the new kernel to the Linux system