logo标签列表

将一个相对定位的DIV叠放在一个绝对定位的DIV上方

csscss-floatz-index
4

当我试图解决导致我的未解决问题的问题时，我决定将 绿色 DIV 提到前面，因为内容不会溢出它。

结构

  1. 绿色纸张：主要 DIV.rack
  2. 橙色和灰色纸张：通过 CSS 的:before 和 :after 插入

HTML

<div class="rack">
 Content 
</div><!-- End Rack -->

CSS

.rack {
    width: 70%;
    height: 100%;
    background: #7FAE68;
    margin: 155px 0 100px 0;
    position: relative;
    float: left;
    left: 15%;
    z-index: 9999;
    transform:rotate(1deg);
    -ms-transform:rotate(1deg);
    -webkit-transform:rotate(1deg);
    padding-bottom:50px;
}
 .rack::before {
 content: "";
 background:  #E1BB70;
position: absolute;
 height: 100%;
 width: 100%;
 z-index: -2;
 transform:rotate(1deg);
 -ms-transform:rotate(1deg);
 -webkit-transform:rotate(1deg);
 float: left;
 left: 0%;
}
 .rack::after {
 content: "";
 background: #E5E8EC;
position: absolute;
 height: 100%;
 width: 100%;
 z-index: -1;
 transform:rotate(-1deg);
 -ms-transform:rotate(-1deg);
 -webkit-transform:rotate(-1deg);
 border: solid 1px #ddd;
 left: 0%;
   top: 0;
}
注意：如果您查看此处的演示, 您会发现无论高度如何，内容都不会超出主DIV(绿色区域)。因此，最好将绿色DIV移到顶部。我已经尝试了一切但都没有成功。请问如何实现？

这张图片展示了内容(例如侧边栏)仍然在绿色(主)DIV中。enter image description here

为什么在同一个规则中同时使用position:absolute和float？ - Palpatim
@Palpatim 我会把它拿掉，但这不会影响它。 - Sleek Geek
3个回答
2

有趣的问题。

这张图片来自于这篇精彩的文章，它将让你更好地理解伪元素层叠的概念：

pseudo elements layers stack

然后你会意识到你的需求是不可能实现的。

无论如何，我创建了一些类似于你需要的东西，使用box-shadow来创建另一个“堆栈”。请参见这个示例。

JSFiddle

1

我已经尝试了所有方法，有什么办法可以实现吗？

为什么不使用嵌套的div呢？它同样有效，并且代码更加直观。这里有一个演示：http://jsbin.com/vizer/1/edit?html,output。

这是使用的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo Stacked Paper</title>
<style>
html {
    font-size: 62.5%;
}
body {
    font: normal 1.3em Verdana;
    padding: 75px;              /* for the demo */
    background-color: white;    /* for the JSBin demo */
}
.rackGrandParent {
    background-color: lightgrey;
    width: 200px;
    transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
.rackParent {
    background-color: gold;
    transform:rotate(-4deg);
    -ms-transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
}
.rack {
    background-color: lightseagreen;
    transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    padding: 10px;
}
</style>
</head>
<body>
    <div class="rackGrandParent">
        <div class="rackParent">
            <div class="rack">Mauris eu lacus ac nunc tincidunt vehicula. Donec congue, ligula quis vehicula pellentesque, nisi lacus sodales elit, quis elementum nunc risus non ligula. Maecenas eget bibendum ante. Sed bibendum lectus sodales faucibus mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel dolor quis metus facilisis dignissim. Suspendisse erat nibh, mollis nec pellentesque id, mattis eu purus. Quisque a nulla pretium, dignissim lectus at, tempor ipsum. Integer quis arcu leo. Maecenas feugiat, nisi viverra mattis pulvinar, urna nulla porttitor orci, vitae condimentum velit nisi sed turpis.</div>
        </div>
    </div>
</body>
</html>
1
前面的帖子是正确的。使用:before、:after和content创建的元素是.rack的子元素，它们的z-index不是全局的，而是在相对定位的父元素内生效。这就是为什么你不能将它们移动到.rack后面的原因。一个解决方法是将内容包装在一个div中，并在包装的div上使用:before和:after。
这是fiddle链接: http://jsfiddle.net/73Fyk/1/。
注意：将：before和：after元素堆叠在.rack后面的方法不是将.rack相对定位。然后，绝对定位的：before和：after在这种情况下被定位在body中，可以轻松地移动到.rack后面。我不喜欢后一种方法。最好将相关实体放在一起，并添加一个微小的标记来包装内容并从那里开始。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接