<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } .par{ width: 1100px; height: 100px; margin: 0 auto; } .header{ background: black; border: 1px solid #ccc; position: sticky; top:0; } .logo{ z-index: -1; } .nav{ float: right; margin-top: -100px; min-height: 100%; } .li{ float: left; line-height: 90px; text-align: center; margin-right: 20px; color: #FFF; } .con img{ width: 100%; height: 100%; max-width: 100%; } .foot{ width: 100%; height: 80px; background: black; position: sticky; bottom:0px; } .foot-li{ float: left; line-height: 70px; text-align: center; margin-right: 20px; color: #FFF; } .foot-nav{ left: 350px; position: relative; } </style> </head> <body> <div> <!-- 头部内容 --> <div> <div> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="图片挂了"> </div> <div> <div>课程</div> <div>职业路径</div> <div>实战</div> <div>猿问</div> <div>手机</div> </div> </div> <!-- 中间内容 --> <div> <img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt=""> <img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt=""> <img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt=""> </div> <!-- 脚部内容 --> <div> <div> <div>企业合作</div> <div>人才招聘</div> <div>联系我们</div> <div>讲师招聘</div> <div>常见问题</div> </div> </div> </div> </body> </html>
麻烦老师点评下,为什么头部设了sticky top=0 不能固定,而脚部可以
慕spring