position 属性指定了元素的定位类型。
position 属性的五个值:
- static
- relative
- fixed
- absolute
- sticky
元素可以使用的顶部,底部,左侧和右侧属性定位。
然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
1、static:默认的,也就是没有定位,那么没有指定定位方式是什么?是相对于文档流,什么叫相对于文档流,比如,
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
像这样的Html代码,会一行一行的往下展示,这里要注意区分行内元素以及块级元素。
2、absolute 绝对定位
常用的方法是:
h2
{
position:absolute;
left:100px;
top:150px;
}
left top right bottom是四个方向。要注意,假如 父元素下面有一个子元素,
那么子元素的绝对定位是相对于父元素来说的。
如果该子元素的父元素没有指定定位方式,也就是默认的static,那么子元素再往父元素的父元素去找,也就是说如果父元素没有设置特殊的定位方式,就会相对于浏览器窗口进行绝对定位了,
注意绝对定位已经脱离了文档流了,会出现重合的情况。
3、relative 相对定位
相对定位是相对的谁? 答:一个元素本该在的位置。
举个例子,正常文档流写了几个h1标签,因为h1是块级元素所以会不停的换行,
如果给其中一个h1指定了相对定位,left:10px,那么就会从原本正确的位置 -- 向右移动10px。
4、固定定位fixed
position:fixed;
固定定位永远都会相对于浏览器窗口进行定位,固定定位会固定在浏览器的某个位置,不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告,如果你不差掉它,当时滑动鼠标查看网页时,小广告一直会在那里,还有常用的就是网站或者APP的导航栏和底部的选择栏。
5、sticky 粘性定位
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative;
而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
如图:滑动条已经往下滑了,仍然会固定在距离页面头部10px的位置处。