position（定位）

position属性是最基础、最常用的页面布局属性之一，那么position属性都有哪些值呢？每个值都是什么意思呢？

position 定位属性有5个值，这五个值分别是：

static ；
relative ；
fixed ；
absolute ；
sticky ；

static静态定位

默认值，即没有定位。正常文档流排列，不受top、bottom、left、right属性影响（也就是你设置了也不生效）。
页面布局：

<div class="static">我是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下

.static {/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(245, 232, 118);
background-color: lemonchiffon;
line-height: 100px;
}

relative相对定位

在正常文档流排列的基础上，保持基本占位空间，可通过top、bottom、left、right属性来改变位置。会产生重叠。
页面布局

<div class="static">我是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我也是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下，设置了top=20px、left=20px，在正常占位的基础上产生了错位的效果。可是说是相对于自身正常文档流的基础上做了位置的改变

.relative {position: relative;
top: 20px;
left: 20px;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(194, 243, 129);
background-color: rgb(233, 255, 205);
line-height: 100px;
}

fixed固定定位

不受文档流的约束，不占用文档流空间，始终位于设定死的定位。会产生重叠。
页面布局

<div class="static">我是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我也是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="fixed1">我是固定定位1号</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下，设置位置为top=30px、right=50px。如果内容超过一屏，即使滚动页面位置也不会发生变化。

.fixed1 {position: fixed;
top: 30px;
right: 50px;/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(129, 243, 190);
background-color: rgb(205, 255, 255);
line-height: 100px;
}

absolute绝对定位

不受文档流的约束，不占用文档流空间，在其最近的已定位的父元素基础上做relative相对定位。如果没有已定位的父元素，则基于html。会产生重叠。
页面布局

<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="absolute_dad">我是绝对定位的父元素
<div class="absolute1">我是绝对定位1号</div>
<div class="absolute2">我是绝对定位2号</div>
</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下，首先当前绝对定位的父元素是有定位的，图中可以发现绝对定位是是脱离文档流的围绕父元素做的位置变化。

.absolute_dad {position: relative;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(131, 129, 243);
background-color: rgb(218, 205, 255);
line-height: 100px;
}
.absolute1 {position: absolute;
top: 80px;
left: 100px;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(216, 129, 243);
background-color: rgb(249, 205, 255);
line-height: 100px;
}
.absolute2 {position: absolute;
top: -80px;
right: 100px;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(207, 129, 243);
background-color: rgb(241, 205, 255);
line-height: 100px;
}

sticky粘性定位

基于用户的滚动位置浏览，当目标元素正常在页面中显示的时候是relative定位，当目标元素超过页面的显示范围时是fixed固定定位在指定位置。会产生重叠。

样式如下，这里的top=0代表，当目标元素超过页面的显示范围时固定在页面显示的位置。

.sticky {position: sticky;
top: 0;
z-index: 99;/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(243, 129, 144);
background-color: rgb(255, 205, 220);
line-height: 100px;
}

上动图

z-index属性

当产生重叠时，可以通过z-index属性来设置堆叠顺序。这里将两个固定定位的z-index分别设置为100和98，将粘性定位的z-index设置为99。可以发现z-index的值越大层级越靠前。
全部代码

<!DOCTYPE html>
<html><body><div class="static">我是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="relative">我是相对定位</div><div class="static">我也是没有定位的静态定位</div><div class="relative">我也是相对定位</div><div class="static">我也是没有定位的静态定位</div><div class="fixed1">我是固定定位1号</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="sticky">我“相对定位”和“固定定位”结合的粘性定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="absolute_dad">我是绝对定位的父元素<div class="absolute1">我是绝对定位1号</div><div class="absolute2">我是绝对定位2号</div></div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="fixed2">我是固定定位2号</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div><div class="static">我也是没有定位的静态定位</div>
</body></html><style>.static {/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(245, 232, 118);background-color: lemonchiffon;line-height: 100px;}.relative {position: relative;top: 20px;left: 20px;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(194, 243, 129);background-color: rgb(233, 255, 205);line-height: 100px;}.fixed1 {position: fixed;top: 30px;right: 50px;z-index: 100;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(129, 243, 190);background-color: rgb(205, 255, 255);line-height: 100px;}.fixed2 {position: fixed;top: 220px;right: 250px;z-index: 98;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(129, 243, 190);background-color: rgb(205, 255, 255);line-height: 100px;}.absolute_dad {position: relative;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(131, 129, 243);background-color: rgb(218, 205, 255);line-height: 100px;}.absolute1 {position: absolute;top: 80px;left: 100px;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(216, 129, 243);background-color: rgb(249, 205, 255);line-height: 100px;}.absolute2 {position: absolute;top: -80px;right: 100px;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(207, 129, 243);background-color: rgb(241, 205, 255);line-height: 100px;}.sticky {position: sticky;top: 0;z-index: 99;/* 字体大小、边框、背景颜色、线高样式 */font-size: 30px;border: 2px solid rgb(243, 129, 144);background-color: rgb(255, 205, 220);line-height: 100px;}
</style>
<script></script>

戛然而止了。
更多前端知识欢迎扫码关注微信公众号：前端博学了没
ღ( ´･ᴗ･` )比心

CSS的定位属性Position解析相关推荐

CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
css怎么使元素绝对定位有过度效果_CSS定位属性Position实例分析
CSS所提供的Position定位属性在进行网页页面布局过程中非常重要,通过使用Position定位属性可以实现对页面元素进行精确定位,最终达到较好的设计及页面展示效果.本文主要针对Position属 ...
CSS中定位属性的常见属性值
CSS中定位属性的常见属性值在使用CSS对页面布局时,我们常会使用到定位属性,定位主要应用于一个元素在另外一个元素之上,或者我们需要在网页中精准地确定某一个元素的位置,并且这个元素有明确的参照物.其 ...
微信小程序css篇----定位（position）
昨天2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇, ...
html的定位属性,CSS之定位属性
一,定位介绍定位的基本思想很简单,它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的. 二,定位类别 1.相对定位相对定位就是相对于自己以前在 ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
css里面的位置属性,CSS定位属性Position详解
4. position:relative + position:absolute 如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位.如果给 ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...

CSS的定位属性Position解析

目录