How to set up css hierarchical relationship

In CSS, you can use the z-index attribute to set the level. This attribute can set the stacking order of elements. Elements with a higher stacking order will always be in front of elements with a lower stacking order; syntax Format "z-index:numeric;", negative values ​​are allowed.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the z-index attribute to set the level.

z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order. (Z-index only works on positioned elements).

Students who have done page layout should be very familiar with the z-index attribute. Z-index is a special attribute for web page display. Because the pattern displayed by the monitor is a two-dimensional plane, it has an x-axis and a y-axis to represent the position attribute. In order to represent the three-dimensional concept such as the superposition order of the upper and lower layers of display elements, the z-index attribute is introduced to represent the difference in the z-axis. Indicates the upper and lower three-dimensional relationship of an element in the superposition order.

Elements with a larger z-index value will be superimposed on elements with a smaller z-index value. For positioned objects that do not specify this property, objects with positive z-index values ​​are above them and objects with negative z-index values ​​are below them.

Simple demonstration

<div style="width:200px;height:200px;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;"><div>

Two DIVs, the second one moves up 50px, the normal situation should be like this

The second one The div covers the first div, and adding the z-index attribute to the second one

<div></div>
    <div><div>
<p>The result will look like this. The simplest application of z-index is like this</p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/1d996561d6b4fe03194a5cc37c8b4c04-1.png?x-oss-process=image/resize,p_40" class="lazy" title="How to set up css hierarchical relationship" alt="How to set up css hierarchical relationship"    style="max-width:90%"  style="max-width:90%" border="0"> </p>
<h3 id="Only-valid-for-positioned-elements">Only valid for positioned elements</h3>
<p>The z-index attribute is applicable to positioned elements (objects whose position attribute value is relative or absolute or fixed), used to determine whether the positioned element is perpendicular to the display screen The stacking order in the direction (called the Z axis), that is to say, if the element is not positioned, the z-index set for it will be invalid. </p><pre class='brush:php;toolbar:false;'><div style="width:200px;height:200px;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>

Although the z-index of the first p is larger than that of the second p, because the first p is not positioned and its z-index attribute does not work, it will still be covered by the second p. .

Who goes up and who goes down with the same z-index

There are actually two situations for the same z-index

1. If two If neither element is positioned and overlaps in position, or two elements have been positioned and have the same z-index and overlap in position, then according to the document flow order, the later ones will overwrite the previous ones.

<div style="position:relative;width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>

#2. If neither element has z-index set, the default value is used, one is positioned and the other is not positioned, then the positioned element covers the unpositioned element

<div style="position:relative;top:50px;width:200px;height:200px;"></div>
<div style=" width:100px;height:100px;"><div>

Parent-child relationship processing

If the z-index of the parent element is valid, then the child element will be consistent with the parent element regardless of whether the z-index is set or not, and will be above the parent element

<div style="position:relative;width:200px;height:200px;z-index:10;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
    </div>

Although the child element sets the z-index smaller than the parent element, the child element still appears above the parent element

If the parent element z-index fails ( Not positioned or using the default value), then the z-index setting of the positioned child element takes effect

<div>
        <div>
<div>
</div>
<p>The child element z-index=-5 takes effect and is overridden by the parent element</p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/eb75caa902e9aae6dbbb5eb9ed1d19eb-6.png?x-oss-process=image/resize,p_40" class="lazy" title="How to set up css hierarchical relationship" alt="How to set up css hierarchical relationship"    style="max-width:90%"  style="max-width:90%" border="0"></p>
<h3 id="Child-elements-between-brothers">Child elements between brothers</h3>
<p>If the z-index of the brother element takes effect, then the coverage relationship of its child elements is determined by the parent element</p><pre class='brush:php;toolbar:false;'><div style="position:relative;width:100px;height:100px;z-index:5;">
        <div style="position:relative;width:50px;height:250px;z-index:50;"></div>
    </div>

    <div style="position:relative;width:100px;height:100px;z-index:10;margin-top:4px;">
        <div style="position:relative;width:30px;height:150px;z-index:-10;"></div>
    </div>

Although the child elements of the first div The z-index is relatively high, but because its parent element has a lower z-index than the second div, the first div child element will be covered by the second div and its child elements

(Learning video sharing: css video tutorial)