<!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><p class="nav"><a href="#part-one">part one</a><a href="#part-two">part two</a><a href="#part-three">part three</a></p><p class="part-one" id="part-one">I'm part one</p><p class="part-two" id="part-two">I'm part two</p><p class="part-three" id="part-three">I'm part three</p></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><p class="nav"><a href="#part-one">part one</a><a href="#part-two">part two</a><a href="#part-three">part three</a></p><p class="part-one" id="part-one">I'm part one</p><p class="part-two" id="part-two">I'm part two</p><p class="part-three" id="part-three">I'm part three</p></body></html>
标签： position: fixed
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）