CSS学习笔记之position属性

2019-02-26 16:01:00 阅读数:152 评论数:0 点赞数:0 收藏数:0

一、前言

1.HTML中的三种布局方式：

标准流（普通流）：网页中默认的布局方式，即顺序布局
浮动：float
定位：position

2.position属性的作用方式：

给position属性设置相应的值，可使元素脱离正常的标准流，并且可以使用top、right、left、bottom属性对元素进行定位，还可以使用z-index属性对元素的层叠顺序进行更改
position的五个属性值：static、relative、absolute、fixed、inherit

为方便，top、right、left、bottom属性简写为TRLB

二、介绍position的五个属性值

1.static：默认值，无定位

元素显示在正常的标准流中，并且忽略TRLB以及z-index属性的设置
相当于没有设置position属性

2.absolute:生成绝对定位元素

可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序
相对于 static 定位以外的第一个父元素进行定位,脱离了正常的标准流,并且不占用标准流空间

举个栗子:

将div标签的position设置为absolute absolute /*{margin:0px;padding:0px; }.absolute{width:100px;height:100px;border:1px solid red;position:absolute;top:0px;left:0px; }

你好

浏览器显示:

通过页面显示我们发现,设置为absolute的绝对定位元素div,不顾处于标准流中的p标签的存在,仍然显示在了top:0px; left:0px;位置,

从中我们也可以看出绝对定位元素脱离了正常的标准流

3.relative：生成相对定位元素

可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序
虽然该元素的位置发生了移动，但相对定位元素仍然处于正常的标准流中,所占据的空间是未生成定位元素之前它所占据的空间，而不是移动之后所占据的空间
使用TRLB对元素进行定位时,不能破坏也无法破坏正常的标准流

举个栗子:

将div标签的position设置为relative relative /*{margin:0px;padding:0px; }.relative{width:100px;height:100px;border:1px solid red;position:relative;top:0px;left:0px; }

你好

浏览器显示:

我们发现,设置为relative的相对定位元素div,受标准流中的p标签的约束,显示在了p标签的下方,因为它是相对于在标准流中原来的位置进行定位的.

因此可以认为相对定位元素仍处于正常的标准流当中,不能破坏标准流布局的规则

4.fixed:也是生成绝对定位元素

可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序
相对于浏览器窗口进行定位,脱离了正常的标准流,并且不占用标准流空间

举个栗子:

给position设置为relative的div标签,加一个position设置为relative的父标签,观察fixed是否受具有position的父标签影响,作为对比我们再加上一个属性值为absolute的div标签 fixed /*{margin:0px;padding:0px; }.fixed{width:100px;height:100px;border:1px solid red;position:fixed;top:0px;left:0px; }.absolute{width:100px;height:100px;border:1px solid blue;position:absolute;top:0px;left:0px; }.pre{width:200px;height:200px;border:1px solid black;position:relative;top:100px;left:100px; }