Html 应用了z索引的div是否可以浮动？_Html_Css

Html 应用了z索引的div是否可以浮动？

html css

Html 应用了z索引的div是否可以浮动？,html,css,Html,Css,我正在尝试制作一个布局，其中导航位于图像顶部的div中。我用z-index来做这个。我尝试将图像设置为背景图像，但在更改浏览器窗口的大小时无法使其正确缩放 z-index似乎工作正常，但现在我的div（包含导航）不再向右浮动怎么解决这个问题 <head> <meta charset="UTF-8"> <style type="text/css"> body{ } #container{ width: 1

我正在尝试制作一个布局，其中导航位于图像顶部的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>


身体{
}
#容器{
宽度：100%；
高度：1000px；
背景颜色：黄色；
位置：相对位置；
}
#蓝色的{
利润率最高：20%；
宽度：50%；
身高：10%；
背景颜色：蓝色；
浮动：对；
位置：绝对位置；
z指数：10；
}
#测试图像{
宽度：100%；
位置：绝对位置；
z指数：5；
}

对于背景作为图像的方法，您尝试过吗

background-size: cover;

由于您使用

位置：固定而不是浮点：右使用：
right: 0;

要使您的图像具有响应性，最简单的方法是使用以下方法将其设置为所需元素作为背景图像：
background: url(yourBGimage.jpg) 50% / cover;

我不知道你为什么过度使用固定的，但这里有一个例子来反映上面的内容（没有z指数的东西）：
位置：用浮动来固定是没有意义的。事实上，这个问题似乎建立在有缺陷的假设上，即z指数是问题所在，而不是绝对位置（包括固定位置）。谢谢。右边的：0似乎可以做到这一点。我还将“固定”改为“绝对”。我将试试你的背景示例，看看效果如何。