HTML <div>使用CSS的自相矛盾的效果

Question

我被困在这里.请帮忙.我想通过CSS进行以下操作.

但是当我使用CSS定位时,我得到了这个输出

第四个(绿色)层应该在第一层(蓝色)下面,这不会发生.这是我使用的代码.

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.但没用.帮我.提前致谢.

Answer 1

工作演示:之前

Senario:

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

使用与OP相同的HTML代码,您只需要一个伪元素 :before或:after 与z-index结合使用.为了方便起见,我在HTML中添加了数字.

注意:您可以设置相对于元素的位置pseudo,设置顶部边框和右边框,您可以使用box-shadow进行倾斜,也可以看到使用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;
}

使用BOX-SHADOW进行演示

在这里,你只需要改变width和height的.box2.

Senario:

你div在我的情况下选择一个div2你没有设置背景颜色然后重置边框border:none;.

由于您已设置div相对宽度,高度和位置,因此您现在可以设置:before宽度为100%宽度和50%高度,一个在顶部,另一个在底部,然后用于:before设置border-top和:after设置 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;
}

工作演示:之前:灵活后

Answer 2

我不确定你能用正常方式做到这一点,一点点黑客可能会有所帮助.

我要做的是添加另一个框正下方.box1与z-index上述所有的,并与大小母公司的50%.

HTML:

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

CSS:

.box1-fake{
    background-color:#00d8ff;
    position:absolute;
    left: -1px;
    top: -1px;
    z-index: 1000;
    width: 50%;
    border-right: 0 none;
}