<!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. SQLServer 2008 R2查看字段约束

    SQLServer 2008 R2 删除字段前检查字段的约束: select a.name,b.name as cname from syscolumns a left join sysobjects ...

  2. wireshark基础学习—第二部分wireshark的基础操作

    抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接口.点击Capture Opti ...

  3. springboot整合ActiveMQ，配置问题

    1.ActiveMQ的安装和相关配置修改 去官网下载安装包解压至文件夹 双击打开 打开浏览器输入 http://127.0.0.1:8161 到此activeMQ就安装好了 2.springboot工 ...

  4. 使用VSCode调试Jest

    0. 环境 Node版本:8.12.0 操作系统:windows10 1. 配置launch.json { "version": "0.2.0", " ...

  5. Day 4 变量常量

    编辑语言的分类 编程语言,他是人与计算机沟通的一种介质 机器语言 计算机只认识0和1,为了和计算机沟通,你也得认识0和1 优点:执行效率快 缺点:普通人根本就写不了这种代码,开发效率低 汇编语言 他还 ...

  6. Back To Top

    //scroll to top (function ($) { $.fn.backTop = function () { var backBtn = this; var position = 1000 ...

  7. cookie,session,fileter,liscen

    会话技术: 会话:一次会话中发生多次请求和响应 一次会话:从浏览器的打开到关闭 功能:在会话的过程中 ,可以共享数据 cookie:客户端的会话技术session:服务端的会话技术 Cookie:小饼 ...

  8. iframe之间的postMessage传参

    1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...

  9. javascript设计模式阅读后的感悟与总结

    单例模式 用于创建唯一的一个对象. 核心在于一个判断 var index if(index){ return index; } init(); 这样只会在第一次的时候初始化创建对象,以后都不会再创建对 ...

  10. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...