logo标签列表

将一个 div 的角落叠放在另一个 div 下方

htmlcssz-index
8

我想将蓝色正方形 div 的角落放在橙色 div 下面。我尝试了我所知道的一切：

z-index 不起作用，因为我的 div 被包装在另一个 div 中，如果我取消包装，我会在定位八个元素时遇到麻烦。

有人能告诉我如何做到这一点吗？或如何为所有元素使用 z-index？

我现在的 HTML 代码:

one

我需要的效果：

two

 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>

1
你所需要的不仅仅是更改 z-index，你需要真正的三维变换。http://www.w3schools.com/css/css3_3dtransforms.asp - Karl Adler
尝试过使用两个div的z-index:1;以及那个位置较高的div始终在顶部，无论您如何在所有三个维度X Y Z中旋转它。 - Oleg Lozynskyi
3个回答
8
这可以通过使用CSS 3D转换来实现。首先，创建一个外部容器并将HTML包装在其中：
#outer {
    position: relative;
    width: 500px;
    height: 400px;
    perspective: 1000px;
    transform-style: preserve-3d;
}
外部容器具有较大的透视值，以保持元素在旋转时不会出现视觉上的变化。它使用transform-style: preserve-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/

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

0

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

这不是一个完美的解决方案，它会引起其他问题，例如，如果文本重叠了复制和裁剪元素的边界。

这种技术也用于旧版本的Photoshop中，在那里无法创建3D元素。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接