我在我的网站上使用此代码:https://codepen.io/dustindowell/pen/GgeWep?editors=1100
我需要隐藏在邮件正文下方的尾部,如下所示:https://codepen.io/haygt/pen/KKPMBOL?editors=1100
但我不能使用z-index: -1;
因为在这种情况下,尾部完全消失了(我正在使用 vuetify,并且很可能它会覆盖 z-index 并且我不能使用负值)。
所以我尝试这样做:https://codepen.io/haygt/pen/eYOzyLv?editors=1100
但是正如您所看到的,它不起作用,那么我该如何做才能将绿色尾部隐藏在消息正文下方?
最佳答案
更新:
为了保持这个位置,用一个容器包裹它,就像我使用bubble-container
一样。
*,
*::before,
*::after {
margin: 0;
border: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-size: 1.5em;
margin: 1em;
background-color: rgba(8, 36, 64, 0.0625);
}
/* MIXIN STARTS HERE */
/* Requires LifeSaver Sass mixin linked externally */
.bubble-center {
position: relative;
display: flex;
justify-content: center;
}
.bubble-right {
position: relative;
display: flex;
justify-content: flex-end;
}
.bubble-left {
position: relative;
display: flex;
justify-content: flex-start;
}
.bubble {
margin: 0.25em;
min-height: 1em;
padding: 0.25em 0.75em;
position: relative;
border-radius: 0.5em;
line-height: 1.5;
color: white;
background-color: dodgerblue;
z-index: 10;
}
.tail {
display: block;
width: 0.75em;
height: 0.5em;
position: absolute;
right: 0.1em;
bottom: 0;
border-left: 0.5em solid green;
border-bottom-left-radius: 100%;
z-index: 1;
}
.bubble-container {
position: relative;
}
<div class="bubble-right">
<div class="bubble-container">
<div class="bubble">
<p>The default bubble.</p>
</div>
<div class="tail"></div>
</div>
</div>
<div class="bubble-left">
<div class="bubble-container">
<div class="bubble">
<p>The default bubble.</p>
</div>
<div class="tail"></div>
</div>
</div>
<div class="bubble-center">
<div class="bubble-container">
<div class="bubble">
<p>The default bubble.</p>
</div>
<div class="tail"></div>
</div>
</div>
您可以使用常规 div
来实现,而不是 ::before
,因为您不能使用 z-index:-1
.
*,
*::before,
*::after {
margin: 0;
border: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-size: 1.5em;
margin: 1em;
background-color: rgba(8, 36, 64, 0.0625);
}
/* MIXIN STARTS HERE */
/* Requires LifeSaver Sass mixin linked externally */
.bubble-center {
text-align: right;
position: relative;
}
.bubble {
display: inline-block;
margin: 0.25em;
min-height: 1em;
padding: 0.25em 0.75em;
position: relative;
border-radius: 0.5em;
line-height: 1.5;
color: white;
background-color: dodgerblue;
z-index: 10;
}
.tail {
display: block;
width: 0.75em;
height: 0.5em;
position: absolute;
right: 0.1em;
bottom: 0;
border-left: 0.5em solid green;
border-bottom-left-radius: 100%;
z-index: 1;
}
<div class="bubble-center">
<div class="bubble">
<p>The default bubble.</p>
</div>
<div class="tail"></div>
</div>
哈巴狗
.bubble-center
.bubble
p The default bubble.
.tail
You might need to convert this CSS to SCSS
关于css - 如何在不使用 z-index 的情况下将一个元素隐藏在另一个元素下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57539793/