次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。

position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。

我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。

我们来通过代码和结果来看一下：

上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]

我们可以看出猫图片并没有移动，而是给兔子图片留着位置。

这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置

代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

用了fixed的效果展示。

以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。

ss 中的定位，是布局中常用的一种方法，它可以使html元素脱离文档流，重新定位。语法如下：

position: static|relative|absolute|fixed

position 有四个值，static（默认静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），通常配合left、top及z-index属性使用（static除外）。

• left —— 定位元素相对于定位点的左距离
• top —— 定位元素相对于定位点的上距离
• z-index ——定位元素的层级，当有多个定位元素上，通过此属性调整元素的显示层级，值越大的显示在最上面。默认如果不设置z-index属性，则会按照其在文档流中的先后位置显示。

static（静态定位）

静态定位很简单，html元素默认就是静态定位，和正常情况下html元素在文档流中的排版一样。left、top和z-index属性对应静态定位来说不起任何左右，如下图示例：

图1中的模块1，虽然设置了position:static,但是其表现和没有设置是一样的，按照标准文档流进行排版。

relative（相对定位）

相对定位是html元素相对于它原来在标准文档流中的位置来定位的。如果不设置top、left的话它和静态定位一样，不同之处就是它可以设置top、left和z-index属性，如下图示例：

代码：

显示效果：

图3中模块2使用了相对定位，脱离正常的文档流，相对于原始位置左边50px，顶部30px，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有偏移。

相对定位的元素宽度默认和块级元素一样，宽度100%；

absolute（绝对定位）

绝对定位时当父级元素也是定位元素（包括相对定位、绝对定位、固定定位）时，它就相对于父级元素的左上角定位，如果父级元素没有定位或者是静态定位，那就相对于浏览器窗口左上角定位。如下示例：

代码：

显示效果：

图5中模块3和模块2-1都设置为绝对定位，模块3的父级没有定位，模块2-1的父级是模块2（相对定位）。所以模块3相对于页面左上角位置定位，模块2-1相对于模块2左上角定位。

绝对定位不保留原来的位置，完全是脱离文档流，且其宽度变成不是100%（类似行内元素），它通常都是和有定位的父级元素一块使用才有意义。

fixed（固定定位）

固定定位，通俗讲就是固定到屏幕上，它和绝对定位一样完全脱离文档流，不保留原来的空间位置。唯一的区别就是它是始终都是相对于浏览器窗口左上角定位，不管其父级元素设置了定位。如下示例：

代码：

显示效果：

图7中模块4的设置为固定定位，它的父级时模块2（相对定位），可以看出和模块2-1（绝对定位）的区别，模块4不是相对于父级的。

再看下面这个示例，当滚动滚动条时模块4始终定在那块不动。

关于z-index

注意看上面图8中，模块4显示在模块3下面，看下图模块3的z-index明明比模块4的小，为什么会显示在模块4上面？

原因是模块4的父级模块（相对定位），它的z-index是100和模块3相同，又因为模块3元素在模块2元素后面，所以模块3显示在模块4上面，如果把模块2的z-index改成101，如下图：

模块4显示在模块3上面了，所以z-index的属性是同级元素相互进行比较大小。

总结

在网页布局中，定位在早期使用较多，现在不建议过多使用定位，只有在特殊情况下使用，比如返回顶部按钮效果，或左侧导航栏，菜单栏固定定位，不跟随页面滚动等。

本篇主要知识点：

感谢关注，欢迎指正错误及补充。

上篇：前端入门——浮动float

言

有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。

一、 纯 html 实现

1. 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素。

  <a href="#aa">跳转到 id 为 aa 标记的锚点</a>
  <p>-------------分隔线-------------</p>
  <div id="aa">a</div>

2. 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签。

  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <div id="abb">bbb</div>

注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说，看下面代码

「html 部分」:

  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 计算该 DOM 节点到 body 顶部距离
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滚动到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果，把上面的代码整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
  <p>-------------分隔线-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <p>-------------分隔线-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔线-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果图：