如何将元素覆盖在容器之上？我已经尝试将z索引设置为-1，但没有成功。我正试图使我的行vh1出现在我的容器上，但它不起作用。我的当前代码附在下面。感谢您的帮助。提前谢谢。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<style>
.con-2{
border: 1px solid green;
height: 100%;
width: 5%;
position: absolute;
right: 0%;
}
.row-3{
border: 3px solid red;
background-color: white;
height: 75%;
}
.col-6{
border: 3px dotted blue;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card-1{
position: absolute;
top: 2%;
width: 55%;
background-color: aqua;
cursor: pointer;
}
.card-2{
position: absolute;
top: 14%;
width: 50%;
background-color: aqua;
cursor: pointer;
}
.vh1 {
position: absolute;
top: 10%;
right: 0.5%;
background-color: aqua;
box-shadow: 0px 0px 12px aqua;
height: 2.5px;
width: calc(5% - 20px);
border-radius: 50%;
overflow: hidden;
}
.scanner-h1 {
position: absolute;
top: 0;
left: 0;
background: white;
height: 100%;
width: 50%;
border-radius: 50%;
animation: scanner-horizontal-loop 3s ease-in-out infinite;
background: linear-gradient(to right,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0));
}
@keyframes scanner-horizontal-loop {
0% {
left: 100%;
}
50% {
left: 0;
}
100% {
left: 100%;
}
}
</style>
</head>
<body>
<div class="container-fluid con-2">
<div class="row row-3">
<div class="col col-6">
<div class="card card-1" onclick="myfunction()" ondblclick="stopListen()">
<img class="card-img-top" src="https://img.icons8.com/windows/32/000000/microphone--v2.png" />
</div>
<div class="vh1">
<div class="scanner-h1"></div>
</div>
<div class="card card-2" onclick="myfunction()">
<img class="card-img-top" src="https://img.icons8.com/windows/32/000000/search--v2.png" />
</div>
</div>
</div>
</body>
</html>在css中，vh1的宽度设置为cal(5%-20px(；宽度是相对于整个身体而不是con-2来设置的。将其更改为cal(100%-20px(；它奏效了。