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

时间：2015-08-05 17:38:25

标签： html css z-index

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

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

我有什么：

one

我需要什么：

two

到目前为止我的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>

3 个答案:

答案 0 :(得分：8)

这可以使用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中有意义的场景，它完全堆叠在物理世界中的场景。

工作，现场示例：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：1)

这个谜题的简单解决方案是复制最后一个div并为他设置不透明度

下面有HTML和CSS代码：

<body>
 <div id="orangeSquare">
        <div id="rightBottomorangeSquare"></div>
        <div id="lefttToporangeSquare"></div>
    </div>
      <div id="orangeSquare2"> <!- this new line->
    <div id="rightBottomorangeSquare2"></div>
    <div id="lefttToporangeSquare2"></div>
      </div><!- this new line end->
    <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中添加了这段CSS代码：

    #orangeSquare2 {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   top: 15px;
   -webkit-transform: rotate(45deg);
   z-index: -1;
 }
 #rightBottomorangeSquare2 {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #f42b06;

 }
 #lefttToporangeSquare2 {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #ff6a05;
   opacity: 0;
 }

这很好用=）并随着窗户的大小而变化 这里的照片

Solution

答案 2 :(得分：0)

您可以通过硬编码或使用某些JS库复制橙色方块部分。然后设置比蓝色方块更高的z-index。如果正确裁剪，它不会与红色方块重叠。

这不是一个完美的解决方案，它会导致其他问题，即文本是否与重复和裁剪元素的边界重叠。

此技术也用于较旧版本的Photoshop，无法创建3D元素。

相关问题
最新问题