<!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. 流程与IT管理是未来IT行业发展的必经之路

    流程与IT管理是未来IT行业发展的必经之路 PM圈子 百家号17-11-2411:30 本文由“光环国际”—中国项目管理PMP培训上市企业转载 IT部门的职责之所以能够从辅助部门发展成业务支撑部门,最 ...

  2. Mac OS 挂载 EFI 引导分区

    正如Windows下的EFI分区一样在资源管理器中默认不显示EFI引导分区(即ESP分区),Mac OS也是如此,为了安全嘛,不让用户随意操作. 那么怎么挂载显示出来呢? 命令转自 https://b ...

  3. C语言学习——bsmap-2.74_main.cpp

    素材路径:https://www.codeforge.cn/read/428275/bsmap-2.74-_-main.cpp__html 1.C/C++预处理指令,常见的预处理指令如下: #空指令, ...

  4. Docker构建一个node镜像

    0. 设置国内docker镜像源 进入Settings->Daemon->Advanced,添加如下配置. { "registry-mirrors": [ " ...

  5. vim实现实时自动保存

    进https://www.vim.org/scripts/script.php?script_id=4521网站下载vim -auto-save wget  https://www.vim.org/s ...

  6. tensorbordX使用

    安装: pip install tensorflow-1.7.0 pip install tensorbord pip install tensorbordX 启动 tensorboard --log ...

  7. gcc使用及动静态库制作

    一. GCC的使用 1. GCC的编译过程 (1)预处理(cpp)gcc -E(输出问价通常以 .i 结尾),将头文件展开,宏替换等操作: (2)编译器(gcc)gcc -S(输出问价以 .s 结尾) ...

  8. 网盘资源分享：你不知道的JavaScript（上）

    链接:https://pan.baidu.com/s/1UEBetOr2Z94oEeu5VsQYXQ 提取码:etts 复制这段内容后打开百度网盘手机App,操作更方便哦

  9. Fortran与C/C++混合编程示例

    以下例子均来自网络,只是稍作了编辑,方便今后查阅. 子目录 (一) Fortran调用C语言 (二) C语言调用Fortran (三) C++ 调用Fortran (四) Fortran 调用 C++ ...

  10. DMA 内存存取原理

    DMA直接内存存取原理 DMADMA直接内存存取原理是指外部设备不通过CPU而直接与系统内存交换数据的接口技术. 要把外设的数据读入内存或把内存的数据传送到外设,一般都要通过CPU控制完成,如CPU程 ...