在绝对DIV上堆叠相关DIV [英] Stack a relative DIV on an absolute DIV

问题描述

当我尝试解决导致此问题的未解决的未解决的将让您更了解伪元素的堆栈：

那么你就会意识到你的要求是不可能的。

无论如何，我创建了一些看起来类似于你的需要，使用 box-shadow 来创建另一个堆栈。请参阅小提琴。

JSFiddle

As I try to solve the problem that led to this my unsolved unsolved question, I decided to bring up the Green DIV to the front since the content doesn't bleed off of it.

Structure

1. Green paper: Main DIV.rack
2. Orange and Gray paper: inserted via CSS :before and :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;
}

Note If you look at the fiddle here, you'll see that the content doesn't bleed beyond the main DIV(gree paper) no matter the height. Since that's that's the case, my best bet would be to bring the green DIV to the top. There's nothing I haven't tried to no avail. Any help on how this can be achieved.

This image shows that the content(sidebar for example) is still within green(main)DIV.

解决方案

Interested question.

This image from this awesome post will make you understand more about layer stack of pseudo elements:

then you will realize that your requirement is impossible.

Anyways, I created some thing looks similar to your need, using the box-shadow to make another "stack". See the fiddle.

JSFiddle

这篇关于在绝对DIV上堆叠相关DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！