Question

我正在尝试标记顶部带有标签的一些div.ad容器，以便网站访问者知道容器包含广告。

但是，有时广告可能无法投放，而容器的高度为0px。这样它就不会影响页面的视图。

我试过了：

.ad:before {
content: "This is an ad";
display:block;
font-size:10px;
}

然而，这个广告大约10-12 px到容器，无论它是否有内容。因此，当.ad容器为0px时，它仍会呈现：before。

我也尝试过：

.ad:before {
position: absolute;
top:0;
left:0;
content: "This is an ad";
}

这是有道理的。当.ad容器的高度为0px时，它不会显示，但当它实际包含和广告时，广告将在文本上呈现。是否有任何方法可以实现最后的解决方案，只有在.ad容器大于0px的高度时才会显示，并且它会将.ad的内容推送到与内容相同的px量我添加到：之前？

Answer 1

您可以使用z-index确保伪元素始终显示在.ad容器内的任何内容之上。这将需要将内容设置为低于伪元素的z-index，如下所示：

.ad:before {
position: absolute;
top:-14px;
left:0;
font-size:14px;
content: "This is an ad";
z-index:2;
}
.ad,.ad * {
position:relative;
z-index:1;
}

工作小提琴：https://jsfiddle.net/35gh307r/

Answer 2

你可以在.ad容器中添加一些padding-top，这样即使没有内容，容器仍然会有相同的填充。

我编辑了@Heidar

的小提琴

https://jsfiddle.net/35gh307r/2/

Css：在顶部添加文本而不影响div高度之前

2 个答案: