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

How to bind domain name to nginx service

Configure multiple servers in nginx.conf: When pr...

Vue login function implementation

Table of contents Written in front Login Overview...

Pure CSS3 to achieve pet chicken example code

I have read a lot of knowledge and articles about...

Detailed explanation of incompatible changes in rendering functions in Vue3

Table of contents Rendering API changes Render fu...

Summary of commonly used SQL statements for creating MySQL tables

Recently, I have been working on a project and ne...

Element with selection table to change the check box in the header into text implementation code

Method 1: Use table attributes: header-cell-class...

Detailed explanation of publicPath usage in Webpack

Table of contents output output.path output.publi...

CSS3 click button circular progress tick effect implementation code

Table of contents 8. CSS3 click button circular p...

Talk about implicit conversion in MySQL

In the course of work, you will encounter many ca...

CSS3 border effects

What is CSS# CSS (abbreviation of Cascading Style...

Docker uses Supervisor to manage process operations

A Docker container starts a single process when i...

Detailed explanation of error handling examples in MySQL stored procedures

This article uses an example to describe the erro...

JS quickly master ES6 class usage

1. How to construct? Let's review the common ...

MySQL DML statement summary

DML operations refer to operations on table recor...

An audio-visual Linux distribution that appeals to audiophiles

I recently stumbled upon the Audiovisual Linux Pr...