HTML <div>使用CSS </div>的反常效果

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

WORKING DEMO :before

senario ：

只使用一个伪元素:before，您只需设置border-top和border-right，然后在div2左下角的绝对位置

使用与OP相同的HTML代码，您只需Pseudo-element :before或:after组合并z-index。为了方便起见，我在HTML中添加了数字。

注意：您可以使用pseudo设置相对于元素的位置，设置顶部边框以及使用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

您只需要更改width的{​​{1}}和height。

senario ：

您在我的案例.box2中选择了一个div，您没有设置背景颜色，然后重置边框div2。

由于您已设置border:none;宽度，高度和位置相对，因此现在可以设置div和＆＃39;＆＃39;宽度为100％宽度和50％高度，一个在顶部，另一个在底部，然后是:before设置:before和border-top设置:after。

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

border-right

WORKING DEMO :BEFORE :AFTER FLEXIBLE

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;
}

Answer 3

您可以在第一个框之后的伪元素上使用clip来实现此功能：

.box1:after {
    content: "";
    border:solid 1px;
    background: #00d8ff;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: -1px;
    left: -1px;
    clip: rect(76px 32px 102px -1px);
}

<强> FIDDLE

有关css clip属性的更多信息，请参阅this mozilla page

它还有cross browser support

Answer 4

将左侧框分为上部和下部两个部分，并相应地指定z-index。

Answer 5

这样的事情怎么样：

<div class="box2">
<div class="box-top"></div> 
<div class="box-bot"></div>
</div>

## css ##

.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}

.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}

.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}

http://jsfiddle.net/a8fXP/30/