Question

当浏览器窗口调整大小时，我遇到了图像重叠的问题。我觉得修复它可能与z-index函数有关，但我不确定，因为我不熟悉CSS。

这是我的CSS：

    body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

#bottomleft_picture {
    position: fixed;
    top: 50%;
    right: 50%;
    /* bottom left */
}
#topright_picture {
    position: absolute;
    top: 30%;
    left: 50%;
    /* top right */
}
#bottomright_picture {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    /* bottom right*/
}
#topleft_picture {
    position: absolute;
    top: 30%;
    right: 50%;
    clear: both;
    /* top left */
}
#topleft_inner_box {
    position:absolute;
    background-color: black;
    opacity:0.4;
    height:40px;
    width: 100px;
    top: 35%;
    left: 35%;
    margin: 0 auto;
}
#topright_inner_box {
    position:absolute;
    background-color: black;
    opacity:0.4;
    height:40px;
    width: 100px;
    top: 35%;
    right: 30%;
    margin: 0 auto;
}
#bottomleft_inner_box {
    position:absolute;
    background-color: black;
    opacity:0.4;
    height:40px;
    width: 100px;
    top: 40%;
    left: 35%;
    margin: 0 auto;
}
#bottomright_inner_box {
    position:absolute;
    background-color: black;
    opacity:0.4;
    height:40px;
    width: 100px;
    top: 40%;
    right: 30%;
    margin: 0 auto;
    text-align:center;
}

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title> Test Title</title>
<link rel="stylesheet" href="index_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<!-- add logo here -->
    <div id="bottomleft_picture">
            <div id="bottomleft_inner_box">
            </div>
            <img src="menu.jpg">

    </div>
    <div id="topright_picture">
        <div id="topright_inner_box">
        </div>
        <img src="welcome.jpg">
        </div>
    <div id="bottomright_picture">
        <div id="bottomright_inner_box">
        </div>
        <img src="contact.jpg">

    </div>
    <div id="topleft_picture">
         <div id="topleft_inner_box">
         </div>
        <img src="news.jpg">

    </div>

<!-- add footer -->
</body>

</html>

请注意，调整窗口大小后，某些照片最终会开始与其他照片重叠。我试图使它成为一个响应更快的布局，可以在（大多数）大小的窗口上工作。我非常感谢任何对我能做什么的见解：）

防止图像与CSS重叠

0 个答案: