Question

是否可以为绝对定位的元素设置：after元素？

这是我的div，它绝对定位：

<div id="myDiv" class="box">..</div>

.box
{
  width: 60px;
  height: 240px;
  position:absolute;  
  background:#333;
  top:0;
  left:0;
}

我想为上面的div添加一个晕影效果，所以我有这个：

.vignette:after{
    -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
    -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.4);
    box-shadow:         inset 0px 0px 85px rgba(0,0,0,0.4);

    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    content: "";
}

但是，只有在我添加：

时，这才有效

.vignette
{
  position:relative;
}

问题是将晕影类添加到myDiv中，因此它会覆盖绝对定位（我需要myDiv）。

任何方式我都可以添加相同的晕影效果，即使myDiv保持绝对定位？

Answer 1

如果您在absolute样式定义中将top: 0; left: 0; bottom: 0; right: 0;更改为top: 0; left: 0; width: 100%; height: 100%;，则可以使用.vignette:after定位div。

：在绝对定位的div之后

1 个答案: