使用CSS的HTML的矛盾效果

我被困在这里。请帮忙。 我想通过css做以下。 但是当我使用CSS定位，我得到这个输出 第四(GREEN)层应该在第一层(BLUE)之下，这不发生。这是我使用的代码。 HTML： <

...我被困在这里。请帮忙。
我想通过css做以下。

但是当我使用CSS定位，我得到这个输出

第四(GREEN)层应该在第一层(BLUE)之下，这不发生。
这是我使用的代码。

HTML：

<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>

CSS：

div{height:100px;width:100px; border:solid 1px;}.box1{position:relative;left:500px;background-color:#00d8ff;}.box2{position:relative;left:570px;top:-30px;background-color:#f6ff00;}.box3{position:relative;left:500px;top:-60px;background-color:#ff69fa;}.box4{position:relative;left:430px;top:-230px;background-color:#24ff00;}

JSFiddle：http://jsfiddle.net/rkubs/

甚至我试图使用Z-index。但没有用。帮我。提前致谢。

.

解决方法

. WORKING DEMO :before

senario：

只使用一个伪元素：在你只需要设置border-top和border-right然后给它一个绝对的位置在div2的左下角

使用与OP相同的HTML代码，所有你需要的是一个Pseudo-element：before或：after combine witn z-index.为了使它很容易我把数字放在你的HTML。

注意：你需要设置相对于元素的位置，使用伪，设置顶边框和right border你可以看到使用box-shadow也看到WORKING DEMO WITH BOX-SHADOW。

HTML

<div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div>

CSS

div{height:100px;width:100px; border:solid 1px;}.box1{position:relative;left:500px;background-color:#00d8ff;z-index:3;}.box2{position:relative;left:570px;top:-30px;background-color:#f6ff00;z-index: 3;}.box2:before{content: '';position: absolute;bottom: -2px;left: -2px;width: 32px;height: 30px;border-top: 1px solid black;border-right: 1px solid black;z-index: 14;background-color: #ff69fa;}.box3{position:relative;left:500px;top:-60px;background-color:#ff69fa;z-index:1;    }.box4{position:relative;left:430px;top:-230px;background-color:#24ff00;z-index:2;}

WORKING DEMO WITH BOX-SHADOW

这里你只需要改变.box2的宽度和高度。

senario：

你选择一个div在我的case div2你不设置背景颜色，然后重置边框border：none; 。

由于你已经设置了div的宽度，高度和相对位置，你现在可以设置：before和’after’宽度100％的宽度和50％的高度，一个在顶部，另一个在底部，然后for：before set border-top并为：后设置border-bottom。

现在设置为border-left和border-right。

div{height:100px;width:100px; border:solid 1px;position:relative;}.box1{left:500px;background-color:#00d8ff;z-index:3;}.box2{left:570px;top:-30px;border:none;}.box2:before,.box2:after{content: '';position: absolute;   background-color:#f6ff00;width: 100%;height: 50%;left: 0;border-left:1px solid black;border-right:1px solid black;}.box2:before{top: 0;z-index: 3;border-top:1px solid black;}.box2:after{bottom: 0;z-index: 0;border-bottom:1px solid black;}.box3{left:500px;top:-60px;background-color:#ff69fa;z-index:1;    }.box4{left:430px;top:-230px;background-color:#24ff00;z-index:2;}

WORKING DEMO :BEFORE :AFTER FLEXIBLE

. ..