Question

我制作了两个独立的部分，两个独立的背景。为什么不出现这两个div。

我试图将导航栏放在顶部，然后另一个部分没有连接到它下方的导航栏，但它根本就没有显示出来，我想知道原因。多谢你们！

                                            HTML
    <!DOCTYPE html>
    <html>
    <head>
<title>
    Hair by Michelle
</title>
<link rel="stylesheet" type="text/css" href="home.css">
 </head>
    <body>
    <div class="all">
<div class="navbar">
        <ul> <h1>Hair By Michelle</h1>
            <li class="home"><a href="#">home</a></li>
            <li class="about"><a href="#">about</a></li>
            <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a></li>
            <li class="contact"><a href="#">contact</a></li>
        </ul>
</div>


    <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>      
<div class="hours">
    <h1>Hours</h1>

    </div>
</div>

                                           CSS

    body {
background: gray;
background-image: url("http://i.jootix.com/r/abstract-hair-design-abstract-hair-design-1920x1080.jpg")
    }
   .navbar {
text-align: center;
background-color: #323232;
position: fixed;
width: 100%;
z-index:100;
   }
    .navbar h1 {
text-align: center;
text-shadow: -2px 1px 13px;
color: white;
    }
   .navbar li {
display: inline;
border-right: 2px solid black;
margin: 10px;
padding-right: 25px;
color: white;
   }
    .navbar li:last-child {
border-right:none;
     }
     .navbar li a{
text-decoration: none;
text-shadow:  2px;


}
   .navbar li a:link {
color: white;
   }
   .navbar li a:visited {
color: white;
 }
  .navbar li a:active {
color: green;
  }
  .navbar li a:hover {
  color: brown;

   }
    .pic1  {
width: 200px;
height: 200px;
border-radius: 100%;
margin-top:5px;
position: absolute;
z-index: 200;

   }
   .hours h1 {
background-color: #323232;
z-index: 300;
 }

Answer 1

它在那里，但它隐藏在导航栏和图片后面。您已将导航栏和图像设置为position: fixed和position: absolute，以便将其从DOM流中移除。 <h1>位于顶部，因为它位于DOM的流程中，并且基本上是第一个涉及的元素。如果设置padding: "150px"，您至少可以看到它。

你应该考虑重组一下。查看this以获取有关定位的一些好信息。

Answer 2

导航栏的position: fixed样式阻止了第二个H1出现，因为它以这种方式在导航栏下面放置。如果您希望导航栏始终独立于页面其余部分的垂直滚动状态而可见，则可能会向hours div添加垂直填充：

.hours { padding-top: 100px; }

Answer 3

首先，您必须改进排版，这样可以轻松地找出嵌套的html。

例如。

<html>
    <head>
    </head>
    <body>
        <div class="all"></div>
        <div class="hours">
            <h1>Hours</h1>
        </div>
    </body>
</html>

你可以一目了然地实现嵌套关系。

排版后，我们可以找到额外的，我不确定它是否在＆lt; img＆gt;或者＆lt; h1>小时＆lt; / h1＆gt;

最后，我认为你的意思是你想在导航条下显示小时数。添加以下内容，

.all {

position: relative;

}

.hours {

position: relative;
top:120px;

}

它可能符合您的要求。

<div>背景没有显示

3 个答案: