Question

HTML：

<!DOCTYPE HTML>
<html>
<head>
    <title>Nightfall Gaming</title>
    <link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>

<body bgcolor="#FFFFFF">


<div id="navbar">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Game News</a></li>
            <li><a href="#">Game Reviews</a>
            <ul>
                <li><a href="#">Xbox 360</a></li>
                <li><a href="#">Xbox One</a></li>
                <li><a href="#">PS3</a></li>
                <li><a href="#">PS4</a></li>
                <li><a href="#">PC</a></li>
                <li><a href="#">Wii</a></li>
            </ul>
            </li>
            <li><a href="#">Contact Us/About Us</a></li>
        </ul>
    </nav>
</div>

<div id="logo">
<a href="Index.html"><img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home"></a>
</div>

<div id="mainbody"></div>

</body>
</html>

CSS：

body {
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }

h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
}   

h3 {
    font-size: 30px;
    text-align: center;
    color: #FFF;
}

h3 a {
    color: #FFF;
}

a {
    color: #FFF;
}

h1 {
    margin-top: 100px;
    text-align:center;
    font-size:60px;
    font-family: 'Bree Serif', 'serif';
    }

#container {
    margin: 0 auto;
    max-width: 890px;
}

p {
    text-align: center;
}

#relatedContent {
  max-width: 800px;
  margin: 200px auto;
}

#relatedContent .item {
  max-width: 44%;
  padding: 3%;
  float: left;
  text-align: center;
}

#relatedContent .item a img {
  max-width: 100%;
}   

#navbar { 
    margin: 70px 350px;
    background-color: #E64A19;
    position: absolute;
    border: 3px solid black;
    text-align: center;
}

nav ul {
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }

nav ul li {
    display:inline-block;
    background-color: #E64A19;
    right: 86px;
    }

nav a {
    display:block;
    padding:0 10px; 
    color:#FFF;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
}

nav a:hover { 
    background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
    display: none;
    position: absolute; 
    top: 60px;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
    border: 1px solid black;
}

/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

#logo {
    position: absolute;
    top: 30px;
    left: 70px;
}

#mainbody {
background: #141414;
width: 1500px;
height: 800px;  
position: absolute;
bottom: 0px;
left: 50px;
}

我基本上试图让导航栏和网站徽标显示在＆＃39; mainbody＆＃39; / background div之上;截至目前，其他两个div都隐藏在＆＃39; mainbody＆＃39;之一。

我已经看过其他一些帖子，但大多数人只是建议使用float：left和clear：两者都是一个解决方案，在我的案例中并没有起作用。其他人说这可能是一个定位问题。

Answer 1

您需要使用z-index。 z-index指定元素的堆栈顺序。数字越大，元素越接近前面。

这是一个简化的JSFiddle来展示它的实际效果。我在示例中没有使用HTML和CSS，并且更改了div的颜色以便更清楚地看到它。

我在#mainbody上添加了'z-index'为0，在z-index和#logo上添加了#navbar为10。

将div放在另外两个div（徽标和导航栏）后面

1 个答案: