使用float div时需要z-index属性

时间:2013-08-16 15:26:04

标签: javascript css web

我发现了一对或三个类似的问题但是所有这些问题都是假设它只是缺少位置:绝对/相对(非读者注意)。如果我的要求是使用浮点数然后尝试解决z-index问题,那该怎么办呢。

http://jsfiddle.net/LcwVx/1/

我有一张透明的图片。我想将一个浮动的div放在透明或z-index后面。我不想改变css中的调用顺序既不改变attirbutes的位置。有没有办法(jQuery或其他)解决这种情况?

#parent {
    width:200px;
    height:300px;
    float:left; /* Requirement */
    border: 1px solid;
    background: url('https://cdn1.iconfinder.com/data/icons/ball/256/transparent.png') no-repeat top left; //ICON HAS TRANSPARENCY
}

#child {
    float:right; /* Requirement */
    height:60px;
    width:100px;
    border: 1px solid;
    background-color: orange; 
    z-index: -1; //THIS IS WHAT I WOULD LIKE TO DO
}

2 个答案:

答案 0 :(得分:4)

z-index仅适用于定位元素,因此只需将position:relative;添加到#child div。

<强> jsFiddle example

答案 1 :(得分:1)

我知道你想使用花车定位它。无论如何在不给出上/左/右/下位置的情况下向孩子添加position:relative;,您应该得到您想要的内容。

如果没有设置位置,则z-index属性不会产生任何影响。

http://jsfiddle.net/LcwVx/6/