Overlap of positioned elements in CSS

If you use several anchor elements in a single page, there may be a case where the positioning element overlaps, and by default, the added element overrides the first

element, you can adjust the order in which each element is displayed by using the Cascade positioning attribute (Z-INDEX).

1. Cascade Positioning Properties Z-index

Used to define the order in which positioning elements are displayed, and in a cascade positioning attribute, the value of the attribute uses the auto value and the number without units, such as: Z-index:auto | Number

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
 

 
As you can see from the illustration above, you can change the display order of the elements at will by defining the Cascade positioning properties. If you cancel the Cascade positioning properties, the effect diagram looks like this:


2. Cascade positioning in simple nested elements

In nested elements, if a positional property is used in both the parent element and the child element, the child element overrides the parent element regardless of the value defined by the Cascade positioning property in the parent element.


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
 


In the above code, you define a cascade positional property value of 1 in the parent element, and the value of the Cascade positioning property in the child element is-1, while the positional properties of the two element are defined as absolute positioning, although in the parent element

The value of the Cascade positioning property defined is greater than the Cascade positional property value defined in the child element, but the child element still overwrites the parent element.

2. Complex cascade positioning containing child elements

When you use an element that contains a cascading positioning property, sometimes a child element is included in the element, the child element's display cannot exceed the cascading order defined in the parent element.


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

 


As you can see from the illustration above, although a large cascade positioning property value is defined in a child element, the order in which the child elements are displayed is still affected by the parent element.