HTML s使用CSS的矛盾效果。[英]Paradoxical effect for HTML s using CSS 本文翻译自  raghuveer999  查看原文  2014-03-23  972    css/

I am stuck here. Please help. I want to make the following through css.

我困在这里。请帮助。我想通过css实现以下内容。

But when I use CSS positioning, I am getting this output

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

The fourth(GREEN) layer should go under first layer(BLUE) which is not happening. This is the code I used.

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

HTML:

HTML:

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

CSS:

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/

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

Even I tried to use Z-index. But no use. Help me. Thanks in advance.

甚至我也试着用z索引。但是没有使用。帮助我。提前谢谢。

5 个解决方案

#1

WORKING DEMO :before

senario:

情形:

Using only one pseudo-element :before you just need to set border-top and border-right then give it an absolute position on the bottom left of div2

只使用一个伪元素:在您只需要设置边框顶部和边框右侧之前，在div2的左下角给它一个绝对位置

With the same HTML code as OP all you need is a Pseudo-element :before or :after combine witn z-index. To make it easy i put numbers in your HTML.

使用与OP相同的HTML代码，您需要的是一个伪元素:在或之后合并witn z-index。为了方便起见，我将数字放在HTML中。

Note: you habe to set position relative to the element with the pseudo, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.

注意:您必须使用伪代码设置相对于元素的位置，设置上边框和右边框，您也可以使用box-shadow来设置位置，请参阅使用box-shadow的工作演示。

HTML

HTML

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

CSS

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

Here you just need to change the width and height of .box2.

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

senario:

情形:

you choose one div in my case div2 you don't set the background-color then reset the the borders border:none; .

你在我的案例中选择一个div你没有设置背景颜色然后重置边界边界:none;。

Since you have set div width, height and position relative you can now set :before and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for :before set border-top and for :after set border-bottom.

既然你已经设置了div的宽度、高度和相对位置，你现在可以设置:before和'after'宽度为100%，高度为50%，一个在顶部，另一个在底部，然后for:在设置边框顶部和for:设置边框底部之后。

Now set for both of then border-left and 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

#2

I'm not sure you can do that with normal way, a little hack may be help.

我不确定你能不能用正常的方式做到，一点小技巧可能会有帮助。

What i do is to add another box right under .box1 with z-index above of all, and with size 50% of the parent.

我要做的是在。box1下面添加另一个方框，首先是z索引，大小为父元素的50%。

HTML:

HTML:

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

CSS:

CSS:

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

#3

You could use clip on a pseudo element after the first box to get this working:

你可以在第一个方框后面的伪元素上使用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

小提琴

For more information about the css clip property see this mozilla page

有关css剪辑属性的更多信息，请参见此mozilla页面

It also has cross browser support

它还支持跨浏览器

#4

Split the left box in two sections, upper and lower section, and assign z-indexes accordingly.

将左框分成上下两部分，并相应地分配z索引。

#5

How about somethign like this:

像这样的设计怎么样:

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

## css ##

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/

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