Стек бумаги (css3) в дизайне материала angular

Я использую конструкцию материалов Angular, и я пытаюсь создать эффект стека бумаги, как указано в следующей кодированной ссылке:

Бумажный стек с использованием CSS3

Он отлично работает, но в тот момент, когда я добавляю Angular Material Design CSS, он ломается (больше нет пользовательского интерфейса стека бумаги), можете ли вы помочь мне исправить это, ниже ссылка на добавленный CSS Material Design.

Тот же код стека бумаги + дизайн материалов CSS

<link rel="stylesheet" href="#" onclick="location.href='https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css'; return false;">
<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>

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что angular -материал CSS включает background: #fff для тела HTML. Это, в сочетании с z-index: -1, используемым в .letter:before, .letter:after в вашем CSS для отображения стопки бумаги под буквой, является причиной того, что ваш стек бумаги не отображается, поскольку он отображается под телом.

Решение 1: Если вы включите background: none !important; в свой собственный CSS для элемента body, вы снова увидите стек бумаги (обратите внимание на использование! Важно, так как angular -материал 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

Кристина находится на правильном пути, но 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

Это имеет тот недостаток, что вы застряли без цвета фона.

Установка z-индекса для дочерних элементов div и p

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

CodePen

Это имеет недостаток, заключающийся в том, что элемент after должен быть сверху и выглядеть так, как будто ваша основная бумага слегка скрещена.

Ответ 3

Происхождение проблемы состоит в том, что псевдоэлементы на букве должны иметь отрицательный z-индекс, чтобы быть под самой буквой.

Но буква не может иметь определенный z-индекс, поскольку это ограничит эффективность отрицательного z-индекса. И в отсутствие этого z-индекса, псевдоэлементы будут не только под буквой, но и под предками буквы (тело в этом случае).

Я думаю, что самый простой способ справиться с этим - сделать букву отдельным контекстом стекирования.

И одна возможность сделать это - установить преобразование, например

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

codepen

ссылка на стеке