这里的右侧导航条在第一屏里随页面滚动，在第二屏就消失了， 请指教~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分屏网页</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/index.js"></script> </head> <body> <!--头部--> <div class="box"> <header class="header"> <div class="header_wrap"> <div class="header_logo">H5实战页面</div> <nav class="header_nav"> <a href="#" class="header_nav-item header_nav-item_status_active">实战课程</a> <a href="#" class="header_nav-item">商业案例</a> <a href="#" class="header_nav-item">课程体系</a> <a href="#" class="header_nav-item">集成环境</a> <a href="#" class="header_nav-item">云端学习</a> <a href="#" class=" header_nav-item_custom_button">即刻学习</a> </nav> </div> </header> <!--标签--> <div class="outline"> <a href="#" class="outline-item">实</a> <a href="#" class="outline-item">商</a> <a href="#" class="outline-item">课</a> <a href="#" class="outline-item">环</a> <a href="#" class="outline-item">云</a> </div> <!--第一屏--> <div class="screen-1"> <div class="screen-1_heading"> <h2>实战课程重磅上线</h2> <p>一键云学习，还在等待什么？</p> </div> </div> <!--第二屏--> <div class="screen-2"> <div class="screen-2_wrap"> <h2 class="screen-2_heading">每门课都是真实商业案例</h2> <h6 class="screen-2_subheading">真实案例，真实场景，在实战中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</h6> <div class="screen-2_photo"> <div class="screen-2_photo-1"></div> <div class="screen-2_photo-2"></div> </div> </div> </div> </div> </body> </html>
*{margin: 0;
padding: 0;
}
/*头部导航条*/
.box{
position: relative;
}
.header{
width: 100%;
background:linear-gradient(black, transparent);
position:fixed;
top:0;
}
.header_wrap{
width: 1200px;
height: 80px;
margin: 0 auto;
position: relative;
}
.header_logo{
width:200px;
height: 39px;
line-height: 39px;
font-size: 20px;
color: white;
text-indent: 50px;
background: url('../img/logo.png')left center no-repeat;
background-size: 39px 39px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 20px;
}
.header_logo:hover{
color: #f01044;
cursor: pointer;
}
.header_nav{
position: absolute;
right: 20px;
height: 39px;
top: 50%;
margin-top: -20px;
}
.header_nav-item{
color: white;
font-size: 14px;
display: block;
height: 39px;
line-height: 39px;
float: left;
position: relative;
width: 59px;
text-align: center;
margin-left: 44px;
text-decoration:none;
}
.header_nav-item:hover{
height: 45px;
cursor: pointer;
border-bottom: 2px solid #f00;
}
.header_nav-item_status_active{
color: red;
height: 45px;
border-bottom: 2px solid #f00;
}
.header_nav-item_custom_button{
background:#f01400;
color: #fbf0ff;
text-align: center;
width: 99px;
margin-left: 40px;
padding: 0;
border-radius: 3px;
color: black;
font-size: 14px;
display: block;
height: 39px;
line-height: 39px;
float: left;
position: relative;
text-decoration:none;
}
.header_nav-item_custom_button:hover{
background:#ff5511;
}
/*标签*/
.outline{
width: 40px;
height: 150px;
background: #fff;
position:fixed;
right: 0;
bottom: 200px;
}
.outline-item{
margin:6px 0;
color: #000;
text-decoration: none;
text-align: center;
display: block;
}
/*第一屏*/
.screen-1{
height: 640px;
width: 100%;
background:url(../img/sc1.jpg) center center no-repeat;
background-size: cover;
}
.screen-1_heading{
padding: 0;
margin:0;
width: 100%;
height: 640px;
display: block;
text-align: center;
position: absolute;
top: 320px;
margin-top: -12px;
font-size: 24px;
color: white;
}
.screen-1_heading p{
font-size: 16px;
margin-top: 29px;
}
/*第二屏*/
.screen-2{
background-color: #f3f5f7;
position: relative;
}
.screen-2_wrap{
width: 1200px;
height: 640px;
}
.screen-2_heading{
font-weight: normal;
margin:0;
padding:0;
font-size: 44px;
line-height: 44px;
color: #000000;
padding-top: 90px;
text-align: center;
}
.screen-2_heading::after{
content:" ";
display: block;
height: 2px;
width:52px;
margin-top: 36px;
background-color: #ff0000;
position: absolute;
left: 50%;
margin-left: -26px;
}
.screen-2_subheading{
font-weight: normal;
margin:0;
padding:0;
font-size: 13px;
line-height: 26px;
color: #2c3137;
padding-top: 50px;
text-align: center;
}
.screen-2_photo{
width: 740px;
height: 362px;
background: url(../img/sc2.png) no-repeat;
background-position: cover;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -370px;
z-index: 0;
}
.screen-2_photo-1{
width: 277px;
height: 383px;
background: url(../img/sc2-1.png) no-repeat;
position: absolute;
bottom: 0;
left: 50%;
margin-left:-134px;
z-index: 2;
}
.screen-2_photo-2{
width: 266px;
height: 205px;
background: url(../img/sc2-2.png) no-repeat;
position: absolute;
top: 56px;
left: 50%;
z-index: 1;
}
/*第三屏*/
.screen-3{
width: 100%;
height: 640px;
background-color: #2b333b;
}
.screen-3_bg0
收起
正在回答
2回答
同学你好，原因是标题下面红色的线是绝对定位，因为.screen-2设置了定位，所以是根据.screen-2来进行定位的，.screen-2的宽度为100%，所以会出现这种情况。
建议：给父级设置相对定位。代码参考： 
如果还有其他疑问，建议在问答区重新提问，便于同学后期查找总结
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星