Question

我是CSS和Web开发的新手。我已经阅读了一些与定位元素相关的堆栈溢出文章，但是我仍然无法使其工作。我想要完成的是以下内容：

1）background.png总是在底部。
2）班级中的任何内容＆＃34;标题＆＃34;高于背景。
3）课堂上的任何内容＆＃34;导航＆＃34;在横幅上方并相对于横幅定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>My Title</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div class = "container">
    <div class = "background">
        <img class = "background-img" src="img/background.png">
    </div>

    <div class = "header">
        <img class ="banner" src ="img/banner.png">
        <div class = "navigation">
            <p>Everything under navigation will go overtop of banner</p>
        </div>
    </div>
</div>




</body>

</html>

这是CSS：

@CHARSET "US-ASCII";

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {

    border: 0; padding: 0; margin: 0;

}

body {

    font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
    background: #444444;
}


.container{
    width: 1400px;
    margin: auto;
    left: 0; right: 0; top: 0;
    position: absolute;
}

.background{
    z-index: -1;
}

.header{
    margin-top: 23px;
}

.banner{
    z-index: 2;
}

.navigation{
    z-index: 3;
}

Answer 1

要使用z-index属性，您必须为元素指定位置。所以在这个例子中你必须做这样的事情

    .header{
        margin-top: 23px;
        position: relative;
        z-index: 2;
    } 

   .navigation{
        z-index: 3;
        position: absolute;
    }

CSS元素位于其他元素之上

1 个答案: