角度材料设计中的纸叠（css3）答案

【问题标题】：paper stack (css3) in angular material design角度材料设计中的纸叠（css3）
【发布时间】：2015-07-05 09:43:59
【问题描述】：

我正在使用 Angular Material Design，我正在尝试创建纸叠效果，如下面的 codepen 链接所示：

它工作正常，但是在我添加 Angular Material Design CSS 的那一刻，它坏了（没有更多的纸叠 UI）你能帮我解决这个问题吗，下面是添加了 Material Design CSS 的链接。

Same Paper Stack code + Material Design 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>

【问题讨论】：

您是否包含了所需的前缀？（用于转换等）在您的笔中注明他们使用了无前缀。
感谢您的回复，请多指教 - 请您详细说明一下。
在链接的笔中，他们选择了“无前缀”选项。为了让它在您的实际项目中工作，您需要添加任何“缺失”的前缀，以便它可以跨浏览器工作。（例如，transform property 需要多个前缀。）
但是在没有材料设计 css 的情况下，相同的代码在第一笔中是否可以正常工作？

标签： javascript angularjs css material-design angular-material

【解决方案1】：

问题似乎是 angular-material CSS 包含 HTML 正文的background: #fff。这与 CSS 中 .letter:before, .letter:after 中使用的 z-index: -1 结合使用以在字母下方显示纸叠是导致纸叠不显示的原因，因为它是在正文下方呈现的。

解决方案 1： 如果您在自己的 CSS 中为 body 元素包含 background: none !important;，您可以再次看到纸叠（注意使用 !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）以使所有内容都显示在主体背景之上。即使是 1 的 z-index 也可以解决问题。

.letter {
  z-index: 1;
}

不幸的是，在这种情况下，.letter:before 和 .letter:after 将呈现在 .letter 之上，因此看起来你的堆栈顶部纸张有点弯曲。您可以通过参考规范in this question 的相关部分找到关于为什么会发生这种情况的解释。但是，如果您选择此解决方案，您始终可以通过对各种元素的旋转和位置进行一些操作来使堆栈显示为您想要的方式

.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>

【讨论】：

感谢您的回复。能否请您更新代码。我试着给出背景：无！重要；但随后您也需要对父元素执行此操作 - 依此类推。如果我们将 z-index 更改为 1，则论文会变得混乱，文本会移到底部 - 请检查
@user237865 我已经用代码 sn-ps 更新了我的答案，您可以在其中看到两个建议的解决方案。

【解决方案2】：

Christina 走在正确的轨道上，但 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 子级设置 z-index

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

CodePen

这样做的缺点是使after 元素位于顶部，并且看起来您的主论文略微交叉。

【讨论】：

谢谢戴夫。我认为您的第二个解决方案现在会很好（尽管我们不需要 .letter div : z-index: 2）。将玩弄修复主纸直...

【解决方案3】：

问题的根源在于字母上的伪元素必须具有负的z-index才能在字母本身之下。

但是字母不能有明确的 z-index，因为这会限制负 z-index 的有效性。如果没有这个 z-index，那么伪元素不仅会在 letter 下，还会在 letter 的祖先（在本例中为 body）下。

我认为处理这个问题的最简单方法是让 letter 成为一个单独的堆叠上下文。

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

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

codepen

stacking context reference

【讨论】：