相关疑难解决方法(0)

如果我们z-index结合使用position: absolute;它可能会将::before元素置于其自身之下.另一个问题有一个很好的例子(jsfiddle.net/Ldtfpvxy).

基本上

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

呈现:

因此堆叠上下文/顺序由定义z-index.但是,当我申请z-index: 1;到的元素,z-index: -1;它的::before我不能达到同样的事情.

只有我省略z-index了元素.

任何想法为什么会这样？该元素是否在其::before&::afterpseudos 之后呈现,以便它们变得相同z-index？

工作: …

我正在使用Angular Material Design,我正在尝试创建下面的codepen链接中给出的纸叠效果:

使用CSS3的纸叠

它工作正常,但是当我添加Angular Material Design CSS时,它会中断(没有更多的纸叠UI)请你帮我解决这个问题,下面是添加了Material Design CSS的链接.

相同的纸叠代码+材料设计CSS

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<div class="letter">
  <p>Dear Friends,</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui, rhoncus viverra quam. Nulla tempus, augue ut consectetur facilisis, arcu elit pellentesque arcu, sed rutrum orci turpis pulvinar augue. Donec eget arcu mauris. Vestibulum tristique consequat lacus eget laoreet. Integer sed nisl sed nibh pulvinar ornare …

解释这个行为:

<div style="z-index: 1"></div>
<div></div>
<div></div>
<div></div>

div {
   position: relative;
   background: red;
   width: 100px;
   height: 100px;    
}

div:before {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;  
    z-index: -1;
    content: "";
    left: -5px;
    top: -5px;
}

http://jsfiddle.net/2VexH/2/

唯一不同的是第一个div有z-index:1集.

看到:

http://jsfiddle.net/Kq2PY/

div与z-index 5相对,并且:after之后是z-index 2的绝对值.

所以不应该:在div后面？

为什么在IE8中,是在父母的孩子身后流动的pesudo元素的背景颜色？文本在前面流动,但背景颜色不在前面.Z-index似乎没有任何帮助.

我无法确定这是否是IE8中的错误.这似乎是一个非常常见的用例,但我找不到很多博客文章或与之相关的SO问题.

http://jsfiddle.net/VAg2E/

    <div id="parent">
       <img src="http://placehold.it/200x200">
    </div>


    #parent{ padding: 20px; }
    #parent:before{
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
    }

编辑:有关堆叠顺序的相关堆栈溢出问题

给出以下HTML:

<div class="foo">howdy howdy howdy how</div>
<div class="bar">Hello</div>?

和以下CSS:

.foo {
    background-color:green;
    overflow:hidden;
    height:.75em;
}

.bar {
    color: white;
    background-color: red;
    margin-top: -10px;
    width: 200px;
}

图层顺序是这样的:

这是相关的jsfiddle:http://jsfiddle.net/q3J8D/

我希望红色背景位于黑色文本之上,并且不明白为什么黑色文本位于红色背景之上.

我可以使用修复此问题position: relative,但我只是好奇.

为什么黑色文字位于红色背景之上？

我特别想找到解释这种行为的官方来源/标准.

在写关于 SO 的另一个问题的答案时，我制作了以下片段：

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

/* relevant CSS */
div {
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  top: 0; left:0;
}
div>span {
  position:relative;
  z-index:0;
}

/* rest is just styling - should be irrelevant for the question */


div {
  font: normal normal normal 2rem/1 'Shadows Into Light', cursive;
  color: white;
  text-align:center;
  margin: 1rem;
  padding: 1rem;
  min-width: 15rem;
  cursor: pointer;
}
div::before {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
  background-color: #bada55;
  border-radius: …

我有一个h1标签,我正在尝试添加一个很酷的动画,边框将从左上角和右下角"增长".

我被我的包裹这样h1两个divS,每个div有::before和::after伪元素.

当根div被碾过时,这些div的伪元素将"收缩",露出下面的边界.

问题是,::before我的根div 的伪元素在边框后面,因此鼠标悬停时立即显示边框.设置z-index的的::beforeS和::after小号会解决它; 但是,我不想这样做 - 这是我正在复制/粘贴的代码片段.没有z-index设置,所以我很困惑为什么会发生这种情况.

在此之前,div除了动画需要的东西之外,我没有其他功能,并且它工作得很好 - 但是它与它有什么关系呢？

这似乎是问题:::在伪元素堆叠顺序问题之前.

但是,没有建议如何解决它的答案.当然,我可以添加第三个div,但我想保留它作为最后的手段.

小问题:https://jsfiddle.net/zppqgn6s/

看到它固定z-index; 看看它应该是什么样子,取消注释第34行.