<!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. 【HNOI 2017】影魔

    Problem Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还 ...

  2. ZJOI2019游记

    Day-2 本蒟蒻有幸能去参加ZJOI2019,然而出发前就做好了爆0的准备. 坐了差不多6,7个小时的车,车上基本就是在颓知乎和打雀,然后就到了酒店. 招宝山酒店--本人住过的第一个四星级酒店,看上 ...

  3. Git初识学习

    初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit ...

  4. Js拾忆

    instanceof运算符:他是判断一个构造函数的prototype是否在对象的原型链上查找到 var a = new Array(); console.log(a instanceof Array) ...

  5. efk学习整理

    概念 Logstash 数据收集处理引擎.支持动态的从各种数据源搜集数据,并对数据进行过滤.分析.丰富.统一格式等操作,然后存储以供后续使用. kibana 可视化化平台.它能够搜索.展示存储在 El ...

  6. [C#]将数据写入已存在的excel文件

    测试如下(xls/xlsx): //将数据写入已存在Excel public static void writeExcel(string result, string filepath) { //1. ...

  7. python之做一个简易的翻译器(二)

    把写好的python程序转换为windows系统下可以运行的exe文件 使用pyinstaller命令来进行转换 1.首先安装pyinstaller 可以在pycharm中安装,也可以直接使用pip命 ...

  8. legend2---项目总结（legend2的意义）

    legend2---项目总结(legend2的意义) 一.总结 一句话总结:总体来说还是化腐朽为神奇的,之前投了很多精力在学习上面,学的内容非常多,但是都记不住,尤其是英语,感悟也是没办法继续深悟,这 ...

  9. Keepalive配置说明

    配置文件 [root@lb01 keepalived]# cat keepalived.conf ! Configuration File for keepalived global_defs { n ...

  10. Fiddler抓取https请求 & Fiddler抓包工具常用功能详解

    Fiddler抓取https请求 & Fiddler抓包工具常用功能详解   先来看一个小故事: 小T在测试APP时,打开某个页面展示异常,于是就跑到客户端开发小A那里说:“你这个页面做的有问 ...