一个应用了z-index的div能够被浮动吗？

Question

一个应用了z-index的div能够被浮动吗？

3

我正在尝试创建一个布局，在其中导航位于图像上方的div中。我使用z-index来实现这一点。我尝试将图像设置为背景图像，但无法在更改浏览器窗口大小时正确缩放。

z-index似乎正常工作，但现在包含导航的div不再右浮动了。

有解决方法吗？

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    body{
    }
    #container{
        width: 100%;
        height: 1000px;
        background-color: yellow;
        position: relative;
    }
    #blue{
        margin-top: 20%;
        width: 50%;
        height: 10%;
        background-color: blue;
        float: right;
        position: absolute;
        z-index: 10;
    }
    #test_image{
        width: 100%;
        position: absolute;
        z-index: 5;
    }
    </style>
</head>


<body>
    <div id="container">
        <img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg">
        <div id="blue"></div>
    </div>
</body>

- Arsinek

1

使用float属性的position:fixed无意义。 - j08691

实际上，这个问题似乎基于错误的假设构建，即 z-index 是问题所在，而不是绝对定位（包括固定定位）。 - BoltClock

2个回答

0

对于使用图像作为背景的方法，你尝试过吗？

background-size: cover;

- German Cabarcas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

如果你使用position:fixed;而不是float:right;，那么请使用：

right: 0;

为使您的图片具有响应式，最简单的方法是将其作为背景图像设置到所需元素中，使用以下代码实现：

background: url(yourBGimage.jpg) 50% / cover;

不确定为什么您过度使用fixed，但这只是一个反映上述行的例子（而且没有z-index的东西）：jsBin演示