CSS makes one element under another
CSS Make an element under another element
In web development, sometimes we need to control the hierarchy of elements, making one element appear below another. This is very useful for designing page layouts and creating special effects. This article will explain how to achieve this effect using CSS.
1. Using the z-index Property
In CSS, you can use the z-index property to control the hierarchy of elements. The larger the z-index value, the closer the element is to the top. If two elements have the same z-index, the later element will cover the earlier one.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-index example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the z-index value of the box2 element is higher than that of the box1 element, so the box2 element appears below the box1 element.
2. Using the position property
In addition to the z-index property, the position property can also affect the hierarchical relationship of elements. When the position property value of an element is static, the z-index property has no effect. When the position property value is relative, absolute, or fixed, the z-index property takes effect.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Code running results:
In the example above, the position attribute value of the box1 element is relative, and the position attribute value of the box2 element is absolute, so the box2 element is displayed behind the box1 element.
3. Using a Negative Z-Index Value
Sometimes, we can also use a negative z-index value to control the hierarchical relationship of elements. A negative z-index value causes an element to appear below normal elements.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of negative z-index</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: -1;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the z-index value of the box1 element is -1, so the box1 element appears underneath the box2 element.
4. Using the opacity property
In addition to the z-index property, the opacity property can also affect the element hierarchy. When the opacity value of an element is less than 1, the element becomes semi-transparent, allowing the underlying elements to show through.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity Example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
opacity: 0.5;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the opacity value of the box1 element is 0.5, so the box1 element becomes semi-transparent, allowing the box2 element to show through the underlying element.
5. Using the clip-path property
The clip-path property can clip the display area of an element, allowing the underlying element to show through. You can achieve different effects by defining different clip-path shapes.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip-path example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
clip-path: circle(50%);
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the clip-path of the box1 element is a circle, so the box1 element is clipped to a circle, allowing the box2 element to be displayed underneath.
6. Using the mix-blend-mode Property
The mix-blend-mode property controls the blending mode of an element, allowing underlying elements to be displayed. You can achieve different effects by defining different blending modes.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mix-blend-mode example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
mix-blend-mode: multiply;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the mix-blend-mode of the box1 element is multiply, so the box1 element blends with the box2 element, causing the box2 element to appear underneath.
7. Using the backface-visibility property
The backface-visibility property controls whether the backface of an element is visible, allowing underlying elements to show through. This effect can be achieved by setting backface-visibility to hidden.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backface-visibility example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
backface-visibility: hidden;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the backface-visibility setting for the box1 element is hidden, making the back of the box1 element invisible and allowing the box2 element to appear underneath.
8. Using the transform property
The transform property can be used to transform an element, including translation, rotation, and scaling. By setting different transform values, you can make an element appear behind another element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
transform: rotate(45deg);
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the transform of the box1 element is rotate(45deg), so the box1 element is rotated, allowing the box2 element to appear underneath.
9. Using the filter property
The filter property can be used to apply filter effects to elements, including blur, contrast, brightness, and more. By setting different filter values, you can make an element appear behind another element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
filter: blur(5px);
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the example above, the filter for the box1 element is blur(5px), so the box1 element is blurred, allowing the box2 element to be displayed underneath.
10. Using the pointer-events Property
The pointer-events property controls whether an element responds to mouse events. By setting pointer-events to none, an element can be displayed behind another element and not respond to mouse events.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer-events example</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
pointer-events: none;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In the above example, the pointer-events setting for the box1 element is “none,” so the box1 element doesn’t respond to mouse events, causing the box2 element to appear underneath.
Through the above code, we can see how different CSS properties and techniques can help us control the element hierarchy and make one element appear underneath another. In actual development, you can choose the appropriate method based on your specific needs to achieve the desired effect.