相关疑难解决方法(0)

我试图用:after伪元素CSS选择器设置元素的样式

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

看起来::after元素不能低于元素本身.

有没有办法让伪元素低于元素本身？

假设我有这个代码:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

这个jsFiddle:http://jsfiddle.net/ZjXMR/

现在,我需要<div class="child">在上面<div class="wholePage">但是在jsFiddle中你可以看到之前渲染的子元素<div class="wholePage">.

如果删除parent该类,position或z-index一切正常.这是我需要的正确行为:http://jsfiddle.net/ZjXMR/1/

如果有z-index或没有从页面删除任何东西我怎么能这样做？

今天，经过四个小时的调试，我很难学到了这个规则：

如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）

我如何通过逻辑理解这种行为？规范在哪里覆盖？

代码（也在CodePen中）：

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

:after是否有可能在其父元素的背景后面 获取 CSS 伪元素？

的背景:after包含与父元素的背景相同的尺寸。所以目前看起来是这样的：

但我希望红色背景 ( :after) 位于父元素后面。所以我添加了position: relative父元素和absolute伪元素。

试图存档这个我使用了这段代码：

.btn {
  position: relative;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
}

.btn:after {
  position: absolute;
  bottom: -0.3rem; right: -0.3rem;
  z-index: -1;

  width: 100%; height: 100%;
  content:'';
  background: red;
}

<a href="" class="btn">
  This is my button
</a>

奇怪的是上面的代码片段就像魅力一样。但在我的实时示例中，显示的代码与本主题中的图像完全相同。有人知道实时站点出了什么问题吗？