在另一个div下面堆叠div的一角

Question

我试图把蓝色方格div的角落放在橙色div下面.我尝试了所有我知道的东西: z-index不起作用,因为我的div被包裹在另一个div中,如果我打开它,我会遇到定位八个元素的麻烦.

谁能告诉我怎么做？或者如何对所有元素使用z-index？

是)我有的:

我需要的:

到目前为止我的HTML:

 body {
   background-color: #222;
   background-repeat: no-repeat;
 }
 #blueSquare {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 50%;
   height: 170px;
   -webkit-transform: rotate(-45deg);
 }
 #rightTopblueSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #7ab9c2;
   opacity: .99;
 }
 #leftBottomblueSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #6baaae;
 }
 /*----------------------------------*/
 #greySquare {
   width: 50%;
   height: 170px;
   position: absolute;
   bottom: 15px;
   left: 15px;
   -webkit-transform: rotate(45deg);
 }
 #lefTopgreySquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #656f78;
 }
 #rightButtomgreySquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #313439;
 }
 /*----------------------------------*/
 #redSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   bottom: 15px;
   -webkit-transform: rotate(-45deg);
 }
 #leftBottomredSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #a2191d;
 }
 #rightTopredSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #d63030;
 }
 /*----------------------------------*/
 #orangeSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   top: 15px;
   -webkit-transform: rotate(45deg);
   z-index: -1;
 }
 #rightBottomorangeSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #f42b06;
 }
 #lefttToporangeSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #ff6a05;
   opacity: 1;
 }

<div id="orangeSquare">
  <div id="rightBottomorangeSquare"></div>
  <div id="lefttToporangeSquare"></div>
</div>
<div id="redSquare">
  <div id="leftBottomredSquare"></div>
  <div id="rightTopredSquare"></div>
</div>
<div id="greySquare">
  <div id="lefTopgreySquare">leftTop</div>
  <div id="rightButtomgreySquare">rightBottom grey sqr</div>
</div>
<div id="blueSquare">
  <div id="rightTopblueSquare">rightTop</div>
  <div id="leftBottomblueSquare">LeftBotom blue sqr</div>
</div>

Answer 1

这可以使用CSS 3D变换来完成.首先,创建一个外部容器并将HTML包装在其中:

#outer {
    position: relative;
    width: 500px;
    height: 400px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

外部容器具有较大的透视值,以防止元素在旋转时看起来不同.它用于transform-style: preserve-3d;覆盖默认堆叠引擎并将所有内容堆叠在3D上下文中.这可确保所有内容都正确堆叠.

然后,为了使元素正确重叠,只需在Y轴周围给每个元素一个5度的小扭曲:

transform: ... rotateY(5deg);

你的替代元素会产生相反的变化:

transform: ... rotateY(-5deg);

结果是一个在3d中有意义的场景,并且它完全堆叠在物理世界中.

工作,现场示例:

body {
   background-color: #222;
   background-repeat: no-repeat;
 }
 #blueSquare {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 50%;
   height: 170px;
   -webkit-transform: rotateZ(-45deg) rotateY(5deg) ;
           transform: rotateZ(-45deg) rotateY(5deg) ;
 }
 #rightTopblueSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #7ab9c2;
 }
 #leftBottomblueSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #6baaae;
 }
 /*----------------------------------*/
 #greySquare {
   width: 50%;
   height: 170px;
   position: absolute;
   bottom: 15px;
   left: 15px;
   -webkit-transform:rotateZ(45deg)  rotateY(-5deg) ;
           transform:rotateZ(45deg)  rotateY(-5deg) ;
 }
 #lefTopgreySquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #656f78;
 }
 #rightButtomgreySquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #313439;
 }
 /*----------------------------------*/
 #redSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   bottom: 15px;
   -webkit-transform:  rotateZ(-45deg) rotateY(-5deg);
           transform:  rotateZ(-45deg) rotateY(-5deg);
 }
 #leftBottomredSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #a2191d;
 }
 #rightTopredSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #d63030;
 }
 /*----------------------------------*/
 #orangeSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   top: 15px;
   -webkit-transform:  rotateZ(45deg) rotateY(5deg);
           transform:  rotateZ(45deg) rotateY(5deg);
 }
 #rightBottomorangeSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #f42b06;
 }
 #lefttToporangeSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #ff6a05;
 }

#outer {
    position: relative;
    width: 500px;
    height: 400px;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

<div id="outer">
    <div id="orangeSquare">
      <div id="rightBottomorangeSquare"></div>
      <div id="lefttToporangeSquare"></div>
    </div>
    <div id="redSquare">
      <div id="leftBottomredSquare"></div>
      <div id="rightTopredSquare"></div>
    </div>
    <div id="greySquare">
      <div id="lefTopgreySquare">leftTop</div>
      <div id="rightButtomgreySquare">rightBottom grey sqr</div>
    </div>
    <div id="blueSquare">
      <div id="rightTopblueSquare">rightTop</div>
      <div id="leftBottomblueSquare">LeftBotom blue sqr</div>
    </div>
</div>

JSFiddle版本:https://jsfiddle.net/jjurL6j8/1/