gpt4 book ai didi

html - 如何使用 css 将 div 边框隐藏在另一个 div 后面?

转载 作者:行者123 更新时间:2023-12-02 21:15:25 24 4
gpt4 key购买 nike

我希望边框 div “隐藏”在圆圈后面而不是穿过它。我认为 z-index 是做这样的事情的方法。

有什么想法吗?

JSFIDDLE:http://jsfiddle.net/qs5xmege/1/

CSS 和 HTML

.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>

最佳答案

.circle一个position:relativez-index仅适用于position:relativeposition:absolute位置:固定

.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>

关于html - 如何使用 css 将 div 边框隐藏在另一个 div 后面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31022051/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com