<!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. Linux常用命令——软件包管理

    Linux常用命令--软件包管理 Linux 模块依赖查询网址http://www.rpmfind.net/ ISO挂载 将所需ISO文件添加到虚拟机 建立挂载文件夹mkdir /mnt/cdrom ...

  2. matlab 入门

    ---恢复内容开始--- 1.cast表示将元素转化成对应的ASCII值 如cast('hellothere','uint8')输出结果为104 101 108 108 111 116 104 101 ...

  3. layui

    给大家推荐个比较好用的前端ui框架layui,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用,而且layui除了ie6/7不兼容其他都兼容,而且还是响应式布局 1,获得layui后 ...

  4. grep 从文件内容中查找

    grep -rin [查找目标] [查找范围] 例子:在当前目录下的文件内查找test字符串 grep -rin test ./

  5. Spring Boot 返回 JSON 数据，一分钟搞定！

    如何返回 JSON 数据? 在 Spring Boot 中返回 JSON 数据很简单,如下几步. 加入依赖 12345678910 <parent> <groupId>org. ...

  6. vue 无限递归级联组件实现方案

    最终组件效果图: 无限级联组件实现思想: 在这里有一个很重要的地方就是前端组件如何与后端匹配方法协调好,无限级联很好实现,但是如何让服务器端可以成功的匹配到条件是一个问题,在这里我借鉴了html元素的 ...

  7. 构建可扩展的微博架构(qcon beijing 2010演讲)#高并发经验值#

    构建可扩展的微博架构(qcon beijing 2010演讲) http://timyang.net/architecture/microblog-design-qcon-beijing/ 互联网架构 ...

  8. 安装在类虚拟机crossover中的容器怎么进行的备份和恢复

    备份教程: 步骤一:运行CrossOver,选中相关容器,然后在[容器]中找到并点击[导出“MathType6.9b_Trial_YY.exe”到存档],或者直接右击容器名称,然后选择[导出“Math ...

  9. python 编码 自动加双斜杠问题

    小编最近在进行utf-8转码的时候,遇到一个问题: 当其他编码中含有斜杆,如: 当取出该字符串时,会自动把斜杆转换成双斜杠 导致转码报错: 这时候可以在转码的时候加上,即可转换成功了 .decode( ...

  10. SAP基础：定位点运算

    先看一下下面简单的代码: REPORT zlytest003. ) VALUE '21.00'. ) . b = a. WRITE b. 运行结果是: 这时候到程序属性页面: 修改固定点算术为空. 保 ...