Question

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

Answer 1

因为您使用position:fixed;代替float:right;使用：

right: 0;

要使图片响应，最简单的方法是使用以下方法将所需元素设置为 background-image ：

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

不确定为什么过度使用fixed，但这只是一个示例来反映上述行（并且没有z-index内容）： jsBin demo

Answer 2

对于背景，您尝试过图像方法吗？

background-size: cover;

应用z-index的div可以浮动吗？

2 个答案: