我试图把蓝色方格div的角落放在橙色div下面.我尝试了我所知道的一切：
z-index不起作用,因为我的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>
解决方法
这可以使用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/
