HTML中的定位

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

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

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

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

没有定位的样式

加了relative

加了relative的结果

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

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

加了absolute

加了absolute的结果

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

加了fixed

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

用了fixed的效果展示。

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

SS 有两个最重要的基本属性，前端开发必须掌握：display和position。

display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex^[1]和网格布局grid^[2]。

本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。

本文由国内最大的在线教育平台之一“腾讯课堂”^[3]赞助。他们现在启动了“腾讯课堂101计划”^[4]，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。

一、position 属性的作用

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

•static•relative•fixed•absolute•sticky

下面就依次介绍这五个值。最后一个sticky是2017年浏览器才支持的，本文将重点介绍。

二、static 属性值

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为“正常的页面流”（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

三、relative，absolute，fixed

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。

3.1 relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

div { position: relative; top: 20px;}

上面代码中，div元素从默认位置向下偏移20px（即距离顶部20px）。

3.2 absolute 属性值

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

它有一个重要的限制条件：父元素不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

/* HTML 代码如下 <div id="father"> <div id="son"></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px。

注意，absolute定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占空间为零，周边元素不受影响。

3.3 fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

div { position: fixed; top: 0;}

上面代码中，div元素始终在视口顶部，不随网页滚动而变化。

四、sticky 属性值

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

因此，它能够形成“动态固定”的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。

页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。

等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生“动态固定”的效果。原因是这四个属性用来定义“偏移距离”，浏览器把它当作sticky的生效门槛。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

#toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 20px;}

上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离。页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。

五、 sticky 的应用

sticky定位可以实现一些很有用的效果。除了上面提到“动态固定”效果，这里再介绍两个。

5.1 堆叠效果

堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。下面是一个图片堆叠的例子，下方的图片会随着页面滚动，覆盖上方的图片（查看 demo^[5]）。

HTML 代码就是几张图片。

<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

CSS 代码极其简单，只要两行。

div { position: sticky; top: 0;}

它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里^[6]。

5.2 表格的表头锁定

大型表格滚动的时候，表头始终固定，也可以用sticky实现（查看 demo^[7]）。

CSS 代码也很简单。

th { position: sticky; top: 0; }

需要注意的是，sticky必须设在<th>元素上面，不能设在<thead>和<tr>元素，因为这两个元素没有relative定位，也就无法产生sticky效果。详细解释可以看这里^[8]。

（正文完）

免费前端全栈课程

初学者刚接触前端，往往会被一大堆技术名词、框架和工具，搞得眼花缭乱。

到底哪些技术是目前的主流技术栈，既能用于公司的开发实务，又能为自己的简历增添亮点？

下面就是一套目前主流的前端技术栈。

（1）Node.js：服务器端的 JavaScript 运行环境，不管哪种前端开发，都必不可少的底层环境。

（2）Webpack：语法转换工具，把 ES6/TypeScript/JSX 语法转成浏览器可以运行的代码。

（3）Koa2：一个非常流行、简洁强大的 Node.js 后端的 Web 开发框架。

（4）MongoDB：目前应用最广泛的非关系数据库之一，功能丰富，用法较简单。

（5）Vue 全家桶：

•Vue：前端基础框架•Vuex：配套的前端状态管理库。•Vue Router：官方的路由插件，构建单页面应用必不可少。•Vue CLI：脚手架工具，帮你快速上手 Vue 开发，无需再花多余时间去实现项目架构。•Vant：有赞前端团队开发的轻量级移动端 Vue 组件库，让你快速使用已经封装好的各种页面组件。

看到这个名单，你是不是感到有点头大，全部掌握它们需要多少时间啊？

现在，腾讯课堂就有一门这样的课程，内容包含了所有这些工具，教你怎么用它们从头完成一个全栈项目，亲手做出一个手机端的移动商城，是由 慕课网的精英讲师--谢成老师讲授。

该课程的制作单位是青盟科技。它是《腾讯课堂101计划》重点推广的优质机构，已有7年 IT 行业教学经验，培养收费学员2000+，有超过72%的学员都进入到名企大厂。如果你想了解课程的详细内容，获取课程大纲，或者想接受系统的前端培训，可以登录腾讯课堂查看“青盟科技”。

（完）

References

[1]弹性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]网格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“腾讯课堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“腾讯课堂101计划”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]这里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]这里:https://css-tricks.com/position-sticky-and-table-headers/

什么需要定位?

浮动可以让多个块级盒子一行没有缝隙排列显示,多用于横向排列盒子.
定位则可让盒子自由地在某个盒子内移动或者固定屏幕某个位置,并且可以压住其他盒子.

定位组成

定位:将盒子定在某一个位置

定位=定位模式+边偏移

定位模式~>指定一个元素在文档中的定位方式

div {
        /* 定位模式 值
        static~>静态定位 (默认方式) 无定位
        relative~>相对定位 
        absolute~>绝对定位 
        fixed~>固定定位 */
        position: static;
    }

边的偏移~>决定了该元素的最终位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 偏移方向:偏移距离 上 下 左 右 */
            top: 100px;
            bottom: 100px;
            left: 100px;
            right: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div>盒子A</div>
</body>

</html>

相对定位 relative

相对定位是元素在移动位置的时候,相当于它原来的位置

特点:

移动位置的时候参照点是自己原来的位置
原来在标准流的位置继续占有.后面盒子仍然以标准流的方式对于它

实践效果:

代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .Lazy {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Lazy">懒羊羊</div>
    <div>喜羊羊</div>
</body>

</html>

绝对定位 absolute

绝对定位是元素在移动位置的时候,是相对于它祖先的元素来说的

特点:

如果没有祖先元素/祖先元素没有定位,则以浏览器为准定位(Document文档)
绝对定位不再占有原先的位置
如果祖先的元素有定位(相对绝对固定),则以最近一级有定位祖先为参考点移动位置

实践

1.祖先元素无定位以浏览器为基础

效果展示:

代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .Pleasant {
            float: right;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Pleasant">
        喜羊羊 
        <div class="small-bell">铃铛</div>
    </div>

</body>

</html>

2.祖先有定位以上一级为基础

效果展示

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sheep {
          position: absolute;
          background-color: sandybrown;
          width: 600px;
          height: 600px;
        }
        .Pleasant {
            position: absolute;
            bottom: 50px;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="sheep">
        
        <div class="Pleasant">
            喜羊羊 
            <div class="small-bell">铃铛</div>
        </div>
    </div>

</body>

</html>

子绝父相

子级是绝对定位的话父级要用相对定位

使用原因:

子盒子绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时,需要占有位置,因此父盒子只能相对定位

总结:父级需要占用位置,则选相对定位.子盒子不需要占位置,则选择绝对定位

但是不是一成不变 按需求来开发灵活变动

实践

使用效果

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        height: 240px;
        padding: 20px 5px;
        border: 1px solid coral;
    }
    .goods {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .goods .hot {
       position: absolute;
       top: -7px;
       right: -10px;
       width: 25px;
    }
</style>
<body>
    <div class="box">
        <div class="goods">
            <img class="hot" src="img/hot.png" alt="">
            <img src="img/thing.png" alt="">
        </div>
    </div>
</body>
</html>

固定定位 fixed

固定定位是元素固定于浏览器可视区域的位置

特点

1.以浏览器的可视窗口为参照点移动元素(跟父元素没有任何关系,不随滚动条滚动)

2.固定定位不再占有原先的位置

大厂使用案例:

实践

效果展示

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }
    /* 固定标签的基本用法 */
    .navigation {
        position: fixed;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
    /* 小技巧 固定在版心右侧位置 */
    /* 
    1.让固定定位的盒子left:50% 走到浏览器可视区的一半位置 
    2.让固定定位的盒子margin-left:版心宽度的一半距离(如此案例 900px宽度 一半450px 为了存在缝隙 可多些距离) 多走版心宽度的一半位置
    就实现让固定定位的盒子贴着版心右侧对齐了
    */
    .tag {
       width: 50px;
       height: 50px;
       background-color: #12a182;
       position: fixed;
       top: 100px;
       left: 50%;
       margin-left: 455px;
    }
</style>
<body>
    <div class="core">
        <div class="navigation"></div>
        <div class="tag">TAG</div>
    </div>
</body>
</html>

粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合

特点

以浏览器的可视窗口为参照点移动元素
占有原先的位置(相对定位的特点)
必须添加top left right bottom 其中一个才有效
跟页面滚动搭配使用

大厂使用案例:

实践

使用效果:

代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }

    /* 固定标签的基本用法 */
    .navigation {
        position: sticky;
        /* 必须存在一个偏移量 */
        top: 0;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
</style>

<body>
    <div class="core">
        <div class="navigation"></div>
        <span>河边芦苇密又繁，秋深露水结成霜。意中之人在何处？就在河水那一方。</span>
        <br>
        <span> 逆着流水去找她，道路险阻又太长。顺着流水去找她，仿佛在那水中央。</span>
        <br>
        <span>河边芦苇密又繁，清晨露水未曾干。意中之人在何处？就在河岸那一边。</span>
        <br>
        <span>逆着流水去找她，道路险阻攀登难。顺着流水去找她，仿佛就在水中滩。</span>
        <br>
        <span>河边芦苇密稠稠，早晨露水未全收。意中之人在何处？就在水边那一头。</span>
        <br>
        <span>逆着流水去找她，道路险阻曲难求。顺着流水去找她，仿佛就在水中洲。</span>
    </div>
</body>

</html>

定位小总结

定位模式	是否脱标	移动位置
static(默认)	否	不能使用边偏移
relative	否(占有位置)	相对于自身位置移动
absolute	是(不占有位置)	带有定位的父级
fixed	是(不占有位置)	浏览器可视区
sticky	否(占有位置)	浏览器可视区

定位叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况.

可以使用z-index来控制盒子的前后次序 z轴

数值可为正/负/0(无单位) 默认auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
只有定位盒子才有z-index属性

实践

效果展示

代码展示

无z-index时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光头强</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

有z-index时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
        /* 层级排上 */
        z-index: 1;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光头强</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

定位拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中,但是通过计算实现水平和垂直居中

left:50% 让盒子的左侧移动到父级元素的中心位置
margin-left:-1/2*元素宽度让盒子向左移动自身宽度的一半

2.定位特殊特性

行内元素添加绝对或者固定定位,可以直接设置高度和宽度
块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小

3.脱标的盒子不会触发外边距塌陷

浮动元素,绝对定位(固定定位) 元素的都不会触发外边距合并的问题.

外边距塌陷:两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以相对较大的上外边距值为准(下边距一样)。左右边距不会出现这种问题。

4.绝对定位(固定定位)会完全压住盒子

绝对定位(固定定位)会压住下面标准流所有的内容[包括文字浮动不会压住文字]

在线咨询

上一篇：前端基础：HTML
下一篇：推荐几个个人精美网站响应式html5网站模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML中的定位

一、position 属性的作用

二、static 属性值

三、relative，absolute，fixed

3.1 relative 属性值

3.2 absolute 属性值

3.3 fixed 属性值

四、sticky 属性值

五、 sticky 的应用

5.1 堆叠效果

5.2 表格的表头锁定

免费前端全栈课程

References

什么需要定位?

定位组成

相对定位 relative

绝对定位 absolute

子绝父相

固定定位 fixed

​粘性定位 sticky

定位小总结​

定位叠放次序 z-index

定位拓展

您的项目需求

粘性定位 sticky

定位小总结