时间:2021-07-01 10:21:17 帮助过:14人阅读
<!DOCTYPE html> <html> <head> <title>当锚点定位遇上position: fixed</title> <style type="text/css"> * { margin: 0; padding: 0; } body { position: relative; } a { color: white; text-decoration: none; } .nav { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: black; } .part-one, .part-two, .part-three { width: 100%; height: 800px; } .part-one { background-color: red; padding-top: 100px; } .part-two { background-color: blue; padding-top: 100px; margin-top: -100px; } .part-three { background-color: yellow; padding-top: 100px; margin-top: -100px; } </style> </head> <body> <div class="nav"> <a href="#part-one">part one</a> <a href="#part-two">part two</a> <a href="#part-three">part three</a> </div> <div class="part-one" id="part-one">I'm part one</div> <div class="part-two" id="part-two">I'm part two</div> <div class="part-three" id="part-three">I'm part three</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>CSS解决有固定导航时链接锚点定位偏移</title> <style type="text/css"> * { margin: 0; padding: 0; } body { position: relative; } a { color: white; text-decoration: none; } .nav { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: black; } .part-one, .part-two, .part-three { width: 100%; height: 800px; } .part-one { background-color: red; padding-top: 100px; } .part-two { background-color: blue; padding-top: 100px; margin-top: -100px; } .part-three { background-color: yellow; padding-top: 100px; margin-top: -100px; } </style> </head> <body> <div class="nav"> <a href="#part-one">part one</a> <a href="#part-two">part two</a> <a href="#part-three">part three</a> </div> <div class="part-one" id="part-one">I'm part one</div> <div class="part-two" id="part-two">I'm part two</div> <div class="part-three" id="part-three">I'm part three</div> </body> </html>
以上就是position: fixed属性用法详解的详细内容,更多请关注Gxl网其它相关文章!