我被困在这里。请帮忙。
我想通过css做以下。
我想通过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;
}
这里你只需要改变.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;
}
