<!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的更多相关文章

  1. transform 遇上 position: fixed

    最近遇到一个有意思的现象,以下 demo 中 fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位. <html> <head> <style ...

  2. 关于锚点定位，ul设置fixed后，div被覆盖一部分的问题

    例如: 问题: 刚开始的时候 .ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed:那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分. 解 ...

  3. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  4. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  5. 移动端采坑：Position: fixed 在Safari上的Bug

    Position: fixed 在IOS上的显示效果 会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部,即position: absolute,bottom: 0p ...

  6. position:fixed 相对父元素定位

    position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...

  7. 如何让position fixed不再基于浏览器窗口定位

    position:fixed默认是相对浏览器定位的. 就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: MDN对position: fixed有一个注释: 当元素祖先的 trans ...

  8. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  9. 层模型--固定定位(position:fixed)

    fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...

随机推荐

  1. vue--mixins

    混入(mixins) 是一种分发Vue 组件中可复用功能的非常灵活的方式 mixins主要用在以下两个方面: 当做完一个项目,想好好放松的时候,突然有新需求 为了不污染完美的构造函数,在构造函数外面定 ...

  2. 全景拍摄,全景视频拍摄,全景VR拍摄,VR全景拍摄,360全景图片拍摄

    北京动软专业提供基于手机.VR设备.PC浏览器的全景拍摄和项目展示服务. 承接服务内容包括720°全景拍摄展示.VR虚拟现实全景.全景漫游.全景视频.物体全景.环物全景等.   全景展示主要应用于展览 ...

  3. react项目中实现悬浮（hover）在按钮上时在旁边显示提示

    <i className={classNames({ 'device-icon': true, 'camera-icon': true, 'camera-icon-hover-show-intr ...

  4. C# 指定程序打开指定文件

    Process process = new Process(); process.StartInfo.FileName = 指定程序exe文件路径: process.StartInfo.Argumen ...

  5. redist命令操作（二）--哈希Hash，列表List

    1.Redis 哈希(Hash) 参考菜鸟教程:http://www.runoob.com/redis/redis-hashes.html Redis hash 是一个string类型的field和v ...

  6. expect使用

    expect时用与提供自动交互的工具.比如如果想要用ssh登陆服务器,每次都输入密码你觉得麻烦,那你就可以使用expect来做自动交互,这样的话就不用每次都输入密码了. 先看例子: #!/usr/bi ...

  7. Dynamic CRM插件调试与单元测试

    背景 使用Dynamic CRM平台开发完业务插件后,不可避免的就是进行插件调试,测试插件是否正常运行,网上关于Dynamic CRM的资料比较少,但对于调试的博客还是挺多的,足可见插件调试对于Dyn ...

  8. Web基础学习

    Servlet和Servlet容器.Web服务器概念:https://blog.csdn.net/lz233333/article/details/68065749 <初学 Java Web 开 ...

  9. 【转】C# 中Linq查询所有上级节点或所有下级节点

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  10. python learn note1

    1.python 的缩进 习惯了java,c++之类的宽容,初学python,被它摆了道下马威,写if else,竟然必须要我正确用缩进格式,原来在python里不能用括号来表示语句块,也不能用开始/ ...