Floating elements (position) are compared at the same level. The one with a larger z-index value will be displayed in front. What is the same level? Let’s explain it through the code below.
Assume that the elements here are all floating elements. It can be seen here that block1 and block2 are at the same level. block3 and block4 are at the same level. We cannot combine block1 and block3 Perform z-index value comparison, which is meaningless.
Floating elements (
position
) are compared at the same level. The one with a largerz-index
value will be displayed in front. What is the same level? Let’s explain it through the code below.Assume that the elements here are all floating elements. It can be seen here that
block1
andblock2
are at the same level.block3
andblock4
are at the same level. We cannot combineblock1
andblock3
Performz-index
value comparison, which is meaningless.As long as the z-index of absolute positioning is larger than the z-index of relative positioning!
Is zIndex set?
Set the z-index of the container
Sometimes elements with relative or absolute position in the HTML will block the elements in the front. You can check if this is the reason