定位position介绍
Posted kukai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位position介绍相关的知识，希望对你有一定的参考价值。
定位 (position): 是一种更加高级的布局手段
-通过定位可以将元素摆放到页面的任意位置。
使用position属性来设置定位
可选值： static 默认值 元素是静止的，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
例子： 开启相对定位
position:relative;
top:100px; // 向上偏移100像素
bottom:10px;
left:10px;
right:10px;
相对定位的特点:
1.如果不设置偏移量，元素不会发生任何变化。
2.相对定位参照元素在文档中的位置进行定位。
3.相对定位会提升元素的层级。
4.相对定位不会使元素脱离文档流。
5.相对定位不会改变元素性质。
绝对定位的特点:
1.如果不设置偏移量，元素的位置不会发生变化。
2.元素会从文档流中脱离。
3.绝对定位会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开。
4.绝对定位会使元素提升一个层级。
5.绝对定位元素是相对于包含块进行定位的。
包含块（containing Block）
正常情况下：
包含块就是离当前元素最近的祖先块元素。
例如：<div class="box1"> 2222<div class="box2">1111</div></div>
div.box2的包含块就是div.box1
<div class="box"><span><em></em></span></div>
span元素的包含块 是div.box ;
em元素的包含块 是div.box;
绝对定位的包含块：
离它最近的开启了定位的祖先元素。
如果所有的祖先元素都没有开启定位，则相对于根元素(<html>)定位。
固定定位（fixed）：绝大部分跟相对定位相同。
唯一不同的是参照浏览器视口，不会随滚动条滚动改变。
粘滞定位（sticky）: 兼容性不好
当元素位置到达某个位置后，不再滚动。
以上是关于定位position介绍的主要内容，如果未能解决你的问题，请参考以下文章
position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？