Question

我的css泡泡有问题。你能帮助我吗？我一定错过了一个我不知道的观点。我试过z-index，但仍然没有工作。但我必须告诉你这个溢出：隐藏我必须使用。这是演示：CodePen

这是 HTML 代码：

<div class="container">
    <div class="bubble">

    </div>

</div>

这是 CSS 代码：

.container{
   float:left;
    width:500px;
    height:auto;
    margin-left:100px;
    margin-top:100px;
    border:1px solid d8dbdf;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
}
.bubble 
{
position: relative;
width: 550px;
height: auto;
overflow:hidden;
padding: 15px;
background: #f4f4f4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #d8dbdf solid 1px;

}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 12px 10px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -5px;
left: 22px;

}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 12px 10px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -6px;
left: 22px;

}

Answer 1

您可以将overflow: hidden;设置为气泡内的<form>标记，而不是.bubble。

如果您不能或不想使用overflow: hidden;，也可以使用clearfix。由于您已before使用了after和.bubble，因此您仍然需要将其应用于<form>代码。

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

Codepen example with clearfix

css气泡不会出现在上面

1 个答案: