角料设计中的纸叠（css3）

Question

我正在使用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 quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p>

</div>

<!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>

Answer 1

问题似乎是角度材质CSS包含background: #fff HTML体的background: #fff 。 这与z-index: -1结合使用z-index: -1用于.letter:before, .letter:after在你的CSS .letter:before, .letter:after显示字母下面的纸叠是导致你的纸叠不显示的原因，因为它在身体。

解决方案1：如果你包括background: none !important; 在你自己的CSS元素中，你可以再次看到纸叠（请注意使用！important，因为angular-material CSS是在你自己之后加载的）。

body {
  background: none !important;
  font: 14px sans-serif;
  padding: 20px;
}

 body { background: none !important; font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); margin: 26px auto 0; max-width: 550px; minheight: 300px; padding: 24px; position: relative; width: 80%; } .letter:before, .letter:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .letter:before { background: #fafafa; box-shadow: 0 0 8px rgba(0,0,0,0.2); left: -5px; top: 4px; transform: rotate(-2.5deg); } .letter:after { background: #f6f6f6; box-shadow: 0 0 3px rgba(0,0,0,0.2); right: -3px; top: 1px; transform: rotate(1.4deg); } 

 <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 quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p> </div> <!-- Angular Material Dependencies --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script> 

解决方案2：您可以调整.letter的z-index （它还将调整.letter:before和.letter:after的z-index），使所有内容都显示在正文背景之上。 即使z-index为1也可以。

.letter {
  z-index: 1;
} 

不幸的是，在这种情况下.letter:before和.letter:after将在.letter上呈现，因此它看起来好像你的堆栈的顶层文件有点弯曲。 您可以在此问题中参考规范的相关部分找到有关为什么会发生这种情况的说明。 如果你选择这个解决方案，你可以随时通过对各种元素的旋转和位置的操作来使堆栈显示出你想要的方式

.letter {
  z-index: 1;
  transform: rotate(1.4deg);
}
.letter p {
  transform: rotate(-1.4deg);
}
.letter:before {
  transform: rotate(-3.9deg);
}
.letter:after {
  transform: rotate(-1.4deg);
}

 body { background: #888; font: 14px sans-serif; padding: 20px; } .letter { background: #f6f6f6; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin: 26px auto 0; max-width: 550px; minheight: 300px; padding: 24px; position: relative; width: 80%; z-index: 1; transform: rotate(1.4deg); } .letter p { transform: rotate(-1.4deg); } .letter:before, .letter:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .letter:before { background: #fafafa; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); left: -5px; top: 4px; transform: rotate(-3.9deg); } .letter:after { background: #fafafa; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); right: 3px; top: 1px; transform: rotate(-1.4deg); } 

 <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 quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p> </div> <!-- Angular Material Dependencies --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script> 

Answer 2

克里斯蒂娜是在正确的轨道上，但before和after都非常挑剔CSS3的行为。

不幸的是，设定

.letter {
z-index:1
}

将导致继承before和after ，并且当它们在主div 之后呈现时，它们将在上面分层。 甚至设定

.letter:before, .letter:after {
 z-index: -1 !important;
}

不会解决这个问题。

同样，设置

body {
 background: none !important;
}

不会继承。

不完美的解决方案

1）使身体透明：

body {
 background: transparent !important;
}

CodePen

这样做的缺点是你没有背景颜色。

为div和p children设置z-index

.letter {
    z-index: 1;
}
.letter div {
  z-index: 2;
}
.letter p {
  z-index: 3;
}

CodePen

这样做的缺点是使after元素位于顶部，看起来主要纸张略微交叉。

Answer 3

问题的根源是字母上的伪元素必须具有负z-索引才能在字母本身下面。

但是字母不能有明确的z指数，因为这会限制负z指数的有效性。 并且在没有这个z-index的情况下，伪元素不仅会出现在字母下，还会出现在字母的祖先（本例中是正文）之下。

我认为处理这个问题的最简单方法是将字母作为单独的堆叠上下文。

例如，一个可能性就是设置变换

.letter {
    transform: translateZ(0px);
}

codepen

堆叠上下文参考