当锚点遇到fixed定位

简介：

当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。

1、问题重现

当使用锚点时，页面上方存在fixed定位，将会出现如下情况（点击“目录二”对应跳转“内容二”的锚点）：

代码如下：

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* { margin: 0; padding: 0; }

body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }

.header {  background-color: #000; opacity: .5; filter:alpha(opacity=50);

height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;

}

.section { margin-top: 100px; }

ul { position: fixed; right: 40px; top: 100px; }

ul li { margin-top: 10px; }

ul li a { color: #000; text-decoration: none; }

.container {  width: 600px; margin: 0 auto;   }

.test { margin-top: 50px; }

.test h2 {  font-size: 18px; font-weight: 800; }

.test .box { width: 600px; height: 200px; background-color: #F46465;  }

</style>

</head>

<body>

<div class="header"></div>

<div class="section">

<ul>

<li><a href="#test1">目录一</a></li>

<li><a href="#test2">目录二</a></li>

<li><a href="#test3">目录三</a></li>

<li><a href="#test4">目录四</a></li>

</ul>

<div class="container">

<div class="test">

<h2 id="test1">一、内容一</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test2">二、内容二</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test3">三、内容三</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test4">四、内容四</h2>

<div class="box"></div>

</div>

</div>

</div>

</body>

</html>

运行代码

2、巧妙运用margin跟padding解决问题

2.1、尝试给“内容*”添加外边距 ==> margin-top:80px

2.1.1、效果如下（没有变化）：

2.1.2、代码如下：

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* { margin: 0; padding: 0; }

body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }

.header {  background-color: #000; opacity: .5; filter:alpha(opacity=50);

height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;

}

.section { margin-top: 100px; }

ul { position: fixed; right: 40px; top: 100px; }

ul li { margin-top: 10px; }

ul li a { color: #000; text-decoration: none; }

.container {  width: 600px; margin: 0 auto;   }

.test { margin-top: 50px; }

.test h2 {  font-size: 18px; font-weight: 800; margin-top: 80px; }

.test .box { width: 600px; height: 200px; background-color: #F46465;  }

</style>

</head>

<body>

<div class="header"></div>

<div class="section">

<ul>

<li><a href="#test1">目录一</a></li>

<li><a href="#test2">目录二</a></li>

<li><a href="#test3">目录三</a></li>

<li><a href="#test4">目录四</a></li>

</ul>

<div class="container">

<div class="test">

<h2 id="test1">一、内容一</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test2">二、内容二</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test3">三、内容三</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test4">四、内容四</h2>

<div class="box"></div>

</div>

</div>

</div>

</body>

</html>

运行代码

2.1.3、结论：锚点定位跟外边距没有关系。

2.2、尝试给“内容*”添加内边距 ==> padding-top:80px

2.2.1、效果如下（虽然锚点定位准了但是却多出来内边距部分）：

2.2.2、代码如下：

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* { margin: 0; padding: 0; }

body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }

.header {  background-color: #000; opacity: .5; filter:alpha(opacity=50);

height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;

}

.section { margin-top: 100px; }

ul { position: fixed; right: 40px; top: 100px; }

ul li { margin-top: 10px; }

ul li a { color: #000; text-decoration: none; }

.container {  width: 600px; margin: 0 auto;   }

.test { margin-top: 50px; }

.test h2 {  font-size: 18px; font-weight: 800; padding-top: 80px; }

.test .box { width: 600px; height: 200px; background-color: #F46465;  }

</style>

</head>

<body>

<div class="header"></div>

<div class="section">

<ul>

<li><a href="#test1">目录一</a></li>

<li><a href="#test2">目录二</a></li>

<li><a href="#test3">目录三</a></li>

<li><a href="#test4">目录四</a></li>

</ul>

<div class="container">

<div class="test">

<h2 id="test1">一、内容一</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test2">二、内容二</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test3">三、内容三</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test4">四、内容四</h2>

<div class="box"></div>

</div>

</div>

</div>

</body>

</html>

运行代码

2.2.3、结论：锚点定位跟内边距有关。

2.3、margin跟padding结合：锚点定位跟内边距有关并且与外边距无关。若单纯给内容添加内边距会影响到我们的页面。

所以我们给“内容*”加上padding-top:80px;margin-top:-80px;即解决我们的问题。

2.3.1、效果如下：

2.2.2、代码如下：

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* { margin: 0; padding: 0; }

body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }

.header {  background-color: #000; opacity: .5; filter: alpha(opacity=50);

height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;

}

.section { margin-top: 100px; }

ul { position: fixed; right: 40px; top: 100px; }

ul li { margin-top: 10px; }

ul li a { color: #000; text-decoration: none; }

.container {  width: 600px; margin: 0 auto;   }

.test { margin-top: 50px; }

.test h2 {  font-size: 18px; font-weight: 800; padding-top: 80px; margin-top: -80px;  }

.test .box { width: 600px; height: 200px; background-color: #F46465;  }

</style>

</head>

<body>

<div class="header"></div>

<div class="section">

<ul>

<li><a href="#test1">目录一</a></li>

<li><a href="#test2">目录二</a></li>

<li><a href="#test3">目录三</a></li>

<li><a href="#test4">目录四</a></li>

</ul>

<div class="container">

<div class="test">

<h2 id="test1">一、内容一</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test2">二、内容二</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test3">三、内容三</h2>

<div class="box"></div>

</div>

<div class="test">

<h2 id="test4">四、内容四</h2>

<div class="box"></div>

</div>

</div>

</div>

</body>

</html>

运行代码

时间： 2024-08-05 21:04:03

当锚点遇到fixed定位的相关文章

fixed定位对其

fixed定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fixed</title> <style type="text/css"> .div1{ position: fixed; left: 100%; top: 50%; margin-left: -200px;/

cocos2d-x中锚点设置及定位方式

问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进行坐标定位,而是使用的坐标原点.也就是说,CCMenu的坐标原点放到了其父节点的坐标原点. 延伸 不光是CCMenu没有使用锚点定位,像CCLayer,CCScene都没有使用锚点定位.详细设定是在构造函数中设计标记m_bIgnoreAnchorPointForPosition = true;下表描

使用absolute模拟fixed定位，兼容ie6，及ie7 8 9和火狐谷歌等浏览器

ie6不支持fixed定位,设定fixed定位后,ie6会认为是错误值,便会使用默认值static,可以使用absolute模拟fixed效果,并且兼容ie 7 8 9以及火狐等. 核心代码:    html,body {        margin: 0;        padding: 0;        height: 100%;    }    html { overflow: hidden; }    body { overflow: auto;}    #demo { positio

关于fixed定位的一些错误看法纠正

之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fixed来模拟fixed定位来解决这个兼容的问题,但是最好的办法还是强制浏览器使用标准模式渲染页面,毕竟这个问题只是在怪异模式下面会出现,使用absolute模拟太麻烦了. <meta http-equiv="X-UA-Compatible" content="edge&qu

HTML兼容性 不声明doctype，IE9标准模式下position:fixed定位失败，导致遮罩层（Mask Layer）显示在页面最下方，FF和Chrome正常

问题描述:ie9标准模式下,老系统中的页面很少有写doctype的,但是不写这个声明,浏览器对于文档的解析机制就不一样了,特别是对于table和样式中的width, height 为100%布局,以及高度自适应的实现方案有影响,不了解的可以自行百度先,那么不写的话,又想加1个遮罩层的效果,一般我们遮罩层是借助position绝对定位实现的,可以写fixed,也可以写absolute,设置为fixed的时候,文档没有doctype,就会导致遮罩层出现在文档最下方,而不是绝对定位的效果,切换为ie9

ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法

ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function(){ $('.footerssss').css({ 'position':'absolute' }) }) $("input").blur(function(){ $('.footerssss').css({ 'position':'fixed' }) setTimeout(function

标题fixed 定位

最近在做一个标题定位的效果,开始想找个插件得了,找了半天结果没啥成果,结果放弃了,还是偷懒不得,自己写一个吧! 需求是这样的:滚动到一定位置的后显示模块的标题 定置,滚动到相应的模块,替换该模块的的内容. html 代码: <article id="box-wrap"> <section class="list"> <h3>标题0</h3> <ul class="gallery" > &

ie6使用expression模拟fixed定位

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html{ _background:url(about:blank); /* 阻止IE6中闪动 , 把空文件换成about:blank , 减少请求 */ } /* 固定定位图层 */ .fixe

css 断行省略号，隐藏，fixed定位

text-overflow(clip | elipsis)(显示省略号| 不显示省略号) white-space:nowrap    强制文字不断行 word-break:break-all;     和       word-break:break-word; word-break:break-all;不仅把超出的文字断行还会整齐的排列 word-break:break-word;   把超出的文字强制断行,其余的不管, eg:<p>jflllllllllllllllllllfdjvorfi