为什么我这代码设置固定定位logo部分会脱离 底部部分链接文字消失
这是未设置固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>经典行布局2</title>
<style type="text/css">
.body{margin:0;
padding:0;
text-align: center;
font-size: 20px;
}
.a{
width: 1100px;
height: 100px;
margin: 0 auto;
background-color: black;
}
.b{width: 1100px;
height: 100%;
margin: 0 auto;
font-size: 0px;
}
.c{float: right;
}
.c li{
display: inline-block;
color: #ffffff;
margin-right: 20px;
margin-top: 20px;
padding-right: 20px;
text-align: center;
font-size: 20px;
}
.d{
text-decoration: none;
color: #ffffff;
}
.A{
width:1100px;
height:100%;
margin: 0 auto;
background-color: black;
}
.f{
width: 1100px;
height: 100px;
background:black;
text-align: center;
line-height: 100px;
margin:0 auto;
font-size: 0;
}
.z{
text-decoration: none;
color: #ffffff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="a">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<ul class="c">
<li><a href="#" class="d">课程</a></li>
<li><a href="#" class="d">职业路径</a></li>
<li><a href="#" class="d">实践</a></li>
<li><a href="#" class="d">猿问</a></li>
<li><a href="#" class="d">手记</a></li>
</ul>
</div>
<div class="b">
<img class="A" src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
<img class="A" src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
<img class="A" src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
</div>
<div class="f">
<p><a class="z" href="#">
网站首页
企业合作
人才招聘
联系我们
常见问题
友情链接
</a></p>
</div>
</body>
</html>
这是设置固定定位后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>经典行布局2</title>
<style type="text/css">
.body{margin:0;
padding:0;
text-align: center;
font-size: 20px;
}
.a{
width: 1100px;
height: 100px;
margin: 0 auto;
background-color: black;
position: fixed;
}
.b{width: 1100px;
height: 100%;
margin: 0 auto;
font-size: 0px;
}
.c{float: right;
}
.c li{
display: inline-block;
color: #ffffff;
margin-right: 20px;
margin-top: 20px;
padding-right: 20px;
text-align: center;
font-size: 20px;
}
.d{
text-decoration: none;
color: #ffffff;
}
.A{
width:1100px;
height:100%;
margin: 0 auto;
background-color: black;
}
.f{
width: 1100px;
height: 100px;
background:black;
text-align: center;
line-height: 100px;
margin:0 auto;
font-size: 0;
position: fixed;
}
.z{
text-decoration: none;
color: #ffffff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="a">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<ul class="c">
<li><a href="#" class="d">课程</a></li>
<li><a href="#" class="d">职业路径</a></li>
<li><a href="#" class="d">实践</a></li>
<li><a href="#" class="d">猿问</a></li>
<li><a href="#" class="d">手记</a></li>
</ul>
</div>
<div class="b">
<img class="A" src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
<img class="A" src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
<img class="A" src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
</div>
<div class="f">
<p><a class="z" href="#">
网站首页
企业合作
人才招聘
联系我们
常见问题
友情链接
</a></p>
</div>
</body>
</html>
正在回答
你好同学，老师使用你设置固定定位的代码测试，logo并没有出现脱离的情况，显示如下，在本地重新测试一下哦：
并且底部是看不到的，这是因为底部设置定位。在没有移动位置的时候，它默认在自己原位置上。由于页面的高度是没有脱离文档流的几张图片（div.b中的图片）撑开的，所以它的原位置看不到了。建议代码如下修改：
使用*给所有的元素初始化样式：
页面的宽度设置100%显示更好哦
因为上面清除元素默认间距，所以导航li就不会居中了，使用行高设置居中更简单：
尾部也设置一下位置，让它显示在底部：
另外，尾部的结构，建议参考导航的结构，使用ul布局更好哦。
祝学习愉快 ，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星