摘要：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。相对定位，相对于自己的初始位置，不脱离文档流。
有过css开发经验的同学，对于position这个属性一定不会陌生，然而这个熟悉的属性确是面试题中的常客，也就说明了该属性在css的世界是有一定的江湖地位的，那么我们就来详细的说说position这个属性。
在w3school中是这样解释position属性的
定义和用法position 属性规定元素的定位类型。
说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
position属性对应的值有
position: static;
position: inherit;
position: relative;
position: absolute;
position: fixed;
position: sticky;（新的属性值）
1、position: static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2、position: inheritinherit值如同其他css属性的 inherit 值，即继承父元素的position值。
3、position: relative相对定位，相对于自己的初始位置，不脱离文档流。也就是说元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
举个例子，html结构
div1div2div3
css样式
div {
width: 100px;
height: 100px;
}
.div1 {
background: #ffff00;
}
.div2 {
background: #00ff00;
position: relative;
top: 40px;
left: 40px;
}
.div3 {
background: #0000ff;
}
结果
其中红色框为div2的初始位置，由于div2设置了position:relative;top: 40px;left: 40px;，所以该元素相对于自己的初始位置的上面40px、左边40px。同时，其他元素的位置未被改变。
4、position: absolute绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
例子中我们把div2的样式稍作改动
.div2 {
background: #00ff00;
position: absolute;
top: 40px;
left: 40px;
}
由于div2的祖先元素都没有定位，所以相对于最初的包含块也就是body，同时由于绝对定位脱离文档流，所以div3占了div2原来的位置。
5、position: fixedfixed元素脱离正常的文档流，所以它与absolute元素很相似，同样会被周围元素忽略，支持top,bottom,left,right属性，但fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会随着浏览器滚动条的滚动而一起滚动。比如我们常见的回到顶部的功能，按钮一直在浏览器的左下方，不管滚动条如何滚动，该按钮都会在左下方的固定的位置，这个需求就可以使用position: fixed来完成。
但需要注意的是，position: fixed是有兼容性问题的，不支持IE6、IE7、IE8。可以通过给该元素设置position: absolute并获取滚动条距离顶部高度加上某个固定高度来实现。
很多同学会对该属性比较陌生，这是一个相对来讲比较新的属性值。
sticky 的本意是粘贴，可以称之为粘性定位，但在 css 中的表现更像是吸附。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。常见的吸顶、吸底（网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下面淘宝这个效果
当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。
注意须指定 top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。
达到设定的阀值，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed是根据元素是否达到设定了的阈值决定的。
兼容性 caniuse文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115792.html
摘要：上篇文章半透明效果的属性和场景最后提到了层叠上下文，在这篇文章中就说说和层叠上下文。探索一使用生成的层叠上下文会压盖基本元素。仔细一想，层叠上下文的概念还是挺好理解的，比和都简单一些。 上篇文章《CSS半透明效果的属性和场景》最后提到了层叠上下文，在这篇文章中就说说opacity和层叠上下文。建议读者在读本篇文章之前，先仔细阅读张鑫旭大神的《深入理解CSS中的层叠上下文和层叠顺序》，并...
摘要：可以试试去掉的会发生很奇妙的事呢附加关于子元素设置为而引发的问题。附加关于开启硬件加速提升网站动画渲染性能问题。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 1. 水平垂直居中问题 这可以说是最经典的问题了，水平垂直居中，这个问题从入门前端一直到面试，甚至到工作之后都会时不时遇到，最近的面试也被问过这之类的问题，这里还是好好总结一番，以作备忘。公用 HTML 部分： ...
摘要：页面布局结构层搭我们的页面框架。不需要使用浮动解决的问题尽量不用。使用浮动之后会使该元素脱标，宋体并且该元素的宋体。备注以后我们做定位的时候，尽量保持子绝父相。宋体宋体是一种协议，就是客户端和服务端链接的一种协议。页面布局 结构层：搭我们的页面框架。 布局层：针对框架内部结构进行排版。 不需要使用浮动解决的问题尽量不用。 使用浮动之后会使该元素脱标，并且该元素的margin。 div 盒子模...
摘要：生成相对定位的元素，相对于元素本身正常位置进行定位。元素的位置通过以及属性进行规定。因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过属性控制叠放顺序，越高，元素位置越靠上。页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Maste...
摘要：在中与半透明效果相关的属性有两个和。属性的值规定透明度。以及更早的版本支持替代的属性。接下来通过场景来描述半透明效果的实现。图片出现半透明效果，如果将文字设置为白色，文字的半透明效果会很小。 在CSS中与半透明效果相关的属性有两个：opacity和rgba。opacity属性的值规定透明度。从 0.0 （完全透明）到 1.0（完全不透明）。设置opacity元素的所有后代元素会随着一起...
阅读 1839·2021-08-19 11:12
阅读 1417·2021-07-25 21:37
阅读 978·2019-08-30 14:07
阅读 1259·2019-08-30 13:12
阅读 642·2019-08-30 11:00
阅读 3520·2019-08-29 16:28
阅读 980·2019-08-29 15:33
阅读 2957·2019-08-26 13:40
