为什么top部分的字被遮住了

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>zuoye2</title>
 <style type="text/css">
 *{margin: 0;
   padding: 0;
   font-family: "微软雅黑";}
 body{height:2000px;}
 .header{width: 100%;
     height: 100px;
     background: #07cbc9;
     overflow: hidden;
     zoom:1;
     box-sizing: border-box; 
     position: fixed;
     top: 0;
     z-index: 999;
 }
 .header ul{float: right;
        list-style: none;
        padding-right: 100px;
       }
 .header ul li{float: left;}
 .header img{padding-top: 26px;
         padding-left: 120px;}
 .header ul li a{text-decoration: none;
             color: #fff;height:100px;
             line-height: 100px;
             display: block;
             padding: 0 20px;
             font-size: 20px;}
 .header ul li a:hover{background: #000;}
 .banner{width:100%;
     height:700px;
     position: relative;
     z-index: 10; 
          top: 100px;}
     .banner img{width:100%;
              height:100%;
             }
     .banner .banner-layer{width:100%;
                        height:700px;
                        position: absolute;
                        top: 0px;
                        opacity: 0.5;
                        background: black;
                        z-index: 11;}
         .your-Name,.your-Phone,.your-Mail{width:500px;
                                    height:40px;}
     .comment{width:500px;
           height:100px;}
     .message{width:700px;
           height:700px;
           text-align: center;
           position: absolute;
           top: 0;
           z-index: 12;
           left: 50%;
           margin-left: -350px;
           padding-top: 150px;
           box-sizing: border-box;}
      .your-Name,.your-Phone,.your-Mail,.comment,.send{background-color: transparent;
                                                   /*font-family: "微软雅黑";*/
                                                   color: #fff;}
     .send{width:200px;
        height:40px;}
     .your-Name:hover,.your-Phone:hover,.your-Mail:hover,.comment:hover{border-color:#07cbc9;}
        .send:hover{border:none;
                 background:#07cbc9; }
        .about{width:100%;}
 
 </style>
</head>
<body>
 <!-- 顶部 -->
 <div class="header">
 <!-- logo -->
 <img src="images/logo.png">
 <!-- nav区 -->
 <ul>
 <li><a href="#">HOME</a></li>
 <li><a href="#">ABOUT</a></li>
 <li><a href="#">GALLERY</a></li>
 <li><a href="#">FACULTY</a></li>
 <li><a href="#">EVENTS</a></li>
 <li><a href="#">CONTACT</a></li>
 </ul>
 </div>
 <!-- banner区 -->
 <div class="banner">
 <!-- 背景图片 -->
 <img src="images/banner3.jpg">
 <!-- 遮罩区 -->
 <div class="banner-layer"></div>
 <!-- 表单区 -->
 <div class="message">
 <form>
 <input type="text" name="your Name" placeholder="your Name" class="your-Name"><br/><br/>
 <input type="text" name="your Phone" placeholder="your Phone" class="your-Phone"><br/><br/>
 <input type="text" name="your Mail" placeholder="your Mail" class="your-Mail"><br/><br/>
 <textarea placeholder="Write Your Comment Here" class="comment"></textarea><br/><br/>
 <input type="submit" name="submit" value="SEND MESSAGE" class="send"><br/>
            </form>
 </div>
 </div>
 <!-- about区 -->
 <div class="about">
 <!-- 上 -->
 <div class="top">
 <h2>ABOUT</h2>
 <hr/>
 <div class="word">Lorem lqsum is simply dummy text of the printing and typesetting<br/>industry.lorem ispum has been the industry's standard dummy<br/>text ever since the 1500s</div>
 </div>
 
 </div>
</body>
</html>

qq_鸭绿桥第一帅哥_0 2018-11-26

源自：项目：网页布局案例 2-10 作业题

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2018-11-28 09:32:17

你好同学 , 需要具体情况具体分析 , 一般定位使用top ,left这些属性 .但是在本代码中 ,因为使用top值改变位置 , 会把后面的元素遮住 , 所以才改为margin-top .让元素的间距把后面的元素挤下去 .

希望解答了你的疑惑 , 祝学习愉快 !

收起回答

好帮手慕夭夭 2018-11-27 09:54:06

你好同学 ,top的内容被盖住 ,是因为banner区域设置定位后设置top值影响的 . banner区域移动后挡住了top内容 . 如下去掉top

改为margin-top ,让banner使用正常的边距挤下来

希望能够帮到你 , 祝学习愉快 ,望采纳 .

收起回答

提问者 qq_鸭绿桥第一帅哥_0 #1

老师能不能这样理解：relative定位一般使用margin-top、margin-left、margin-right、margin-bottom来改变元素位置；而absolute定位一般使用top、left、right、bottom来改变元素位置。

2018-11-27 20:09:33