Question

你好我已经设法用css创建一个明星，但是它隐藏了我要在明星面前显示的字段。我想知道是否有人会指出我正确的方向，我应该做些什么来解决它。感谢

<div class="views-field views-field-field-freebetamount">
<div class="field-content">
<div id="star12">£200</div>
</div>
</div>

CSS

.views-field-field-freebetamount {
color:white;
}

#star12 {
 background: blue;
 width: 40px;
 height: 40px;
 position: relative;

}

#star12:before, #star12:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 40px;
 width: 40px;
 background: blue;
}

#star12:before {
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
}

#star12:after {
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -ms-transform: rotate(60deg);
 -o-transform: rotate(60deg);
}

freebetamount字段应该有希望出现在明星之上。我有限的CSS技能让我尝试z-index但无济于事。

任何？

感谢

Answer 1

使用css你需要设置z-index: 100或类似的东西来放置其他东西

Answer 2

你想要看看z-index。无论您希望在另一个元素上显示哪个元素，都需要具有更高的CSS z-index数。

在css文件中;

#yourID {
z-index: 99;
}

Answer 3

您必须在negative z-index和:before伪元素中定义:after值。

#star12 {
 background: blue;
 width: 40px;
 height: 40px;
 position: relative;
   font-size:1.3em;
}

#star12:before, #star12:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 40px;
 width: 40px;
 background: blue;
  z-index:-1;
}

检查 Demo 。

使场景出现在CSS样式之上

3 个答案: