DIV 没有出现并且 z-index 也没有效果

Question

我正在尝试在 CSS 中创建对角条纹布局，如下所示：http://www.website-gallery.com/wp-content/uploads/tdomf/355/Nike%20Bloed%20Oranje%20Art%20Challenge%202.0.png

这是我的代码笔：http://codepen.io/Chiz/pen/zvWRNW

看起来不错，但问题是 "div class="blacktop" 没有显示。我希望它与灰色 div 重叠，而且 z-index 似乎也没有效果即使我将 position:relative 设置为所有 DIV。

body {
  overflow: hidden;
}

div {
  position: relative;
}

div.gray, div.blackbottom {
  width: 135%;
  height: 450px;
  background-color: gray;
  margin: -10px 0 0 -140px;
  z-index: 100;
  -webkit-transform: skew(-20deg, -20deg);
  -moz-prop: skew(-20deg, -20deg);
  -ms-transform: skew(-20deg, -20deg);
  transform: skew(-20deg, -20deg);
  -webkit-transform: rotate(8deg);
  -moz-prop: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

div.blackbottom {
  margin-top: -100px;
  background-color: white;
  z-index: 200;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

div.blacktop {
  width: 135%;
  height: 200px;
  background-color: black;
  z-index: 300;
}

<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

Answer 1

因为你的前两个 div 没有浮动或任何东西，它们有一个高度并将下面的 div 向下推。如果您在 body 上禁用 overflow:hidden，您将看到黑色 div。

长话短说：让你的柏油路 position:absolute 漂浮在背景 divs 之上。

示例：http://codepen.io/anon/pen/rOdJQr

HTML:

<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

CSS

@mixin prefix ($prop, $val)
{
  -webkit-#{$prop}: #{$val};
  -moz-#{prop}: #{$val};
  -ms-#{$prop}: #{$val};
  #{$prop}: #{$val};
}

body
{
  overflow:hidden;
}

div
{
  position:relative;
}

div.gray
{
  width:135%;
  height:450px;
  background-color:gray;
  margin:-10px 0 0 -140px;
  z-index:100;
  @include prefix(transform, skew(-20deg,-20deg));
  @include prefix(transform, rotate(8deg));
}

div.blackbottom
{
  @extend div.gray;

  margin-top:-100px;
  background-color:white;
  z-index:200;
  @include prefix(transform, rotate(17deg));
}

div.blacktop
{
  position: absolute;
  bottom: 10px;
  width:135%;
  height:200px;
  background-color:black;
  z-index:300;
}

Answer 2

我向 .blacktop 添加了与其他 2 个 div 相同的共享设置，因此如果您像这样更新 css，它会显示。

div.blacktop
{
  @extend div.gray;

  top: -500px;
  width:135%;
  height:200px;
  background-color:black;
  z-index:300;
  @include prefix(transform, rotate(17deg));
}

这里是一个片段

body {
  overflow: hidden;
}

div {
  position: relative;
}

div.gray, div.blackbottom, div.blacktop {
  width: 135%;
  height: 450px;
  background-color: gray;
  margin: -10px 0 0 -140px;
  z-index: 100;
  -webkit-transform: skew(-20deg, -20deg);
  -moz-prop: skew(-20deg, -20deg);
  -ms-transform: skew(-20deg, -20deg);
  transform: skew(-20deg, -20deg);
  -webkit-transform: rotate(8deg);
  -moz-prop: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

div.blackbottom {
  margin-top: -100px;
  background-color: white;
  z-index: 200;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

div.blacktop {
  top: -500px;
  width: 135%;
  height: 200px;
  background-color: black;
  z-index: 300;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

DIV 没有出现并且 z-index 也没有效果

DIV doesn't show up and z-index has no effect either

html

css

css-transforms