在相对DIV上堆叠相对DIV
时尚极客
当我尝试解决导致这个未解决的未解决问题的问题时，我决定将Green DIV置于最前面，因为内容不会从中流失。
结构体
- 绿皮书：主DIV.rack
- 橙色和灰色纸张：通过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中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将DIV元素堆叠在彼此相对的位置上：相对
- 2
在相对定位的元素上添加`div`
- 3
相对div高度
- 4
如何居中相对div？
- 5
jQuery相对动画DIV
- 6
绝对在相对div的位置？
- 7
将相对div放在另一个div上，该div占据整个div
- 8
将div相对居中放置在HTML上
- 9
绝对div在父级上被分配相对位置
- 10
相对放置div后的内容
- 11
固定包装中的相对div
- 12
相对DIV宽度和高度
- 13
5个固定div，相对div
- 14
CSS：固定div相对div旁边
- 15
div的高度随着相对div的增加而增加
- 16
5个固定div，相对div
- 17
溢出隐藏的相对div内的绝对div
- 18
相对div内的CSS响应绝对div
- 19
相对 > 绝对 > 相对 div 中的居中文本
- 20
位置绝对`div`在相对父级`div`的内部位置消失在chrome和edge上
- 21
为什么2个.col div彼此堆叠，以及如何在boostrap的相对侧重复此重复？
- 22
绝对相对于div的位置图片
- 23
div相对，没有特定的高度
- 24
相对于彼此定位嵌套的div
- 25
将相对div固定在屏幕顶部
- 26
相对于高度设置div的宽度
- 27
CSS相对定位将div换行
- 28
如何将div以相对宽度居中？
- 29
CSS div父边框相对位置
我来说两句