Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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; }

 

网页显示:

 

  我们发现,属性值为fixed的子标签并不受具有position属性的父标签影响,脱离了来父标签的约束,仍然显示在top:0px; left:0px;位置.

而属性值为absolute的子标签却受着具有position属性的父标签约束,显示在父标签的区域内,这也是fixed与absolute的一个重要区别

但我们还是可以认为,属性值为absolute的子标签也显示在了top:0px; left:0px;位置.只不过它是相对于父标签进行定位的

  5.inherit:继承

 举个栗子:

对于父div标签我们设置position:fixed,对于子div标签我们设置position:inherit,观察子标签是否会继承父标签的position属性值 inherit /*{margin:0px;padding:0px; }.pre{width:200px;height:200px;border:1px solid black;position:fixed;top:100px;left:100px; }.inherit{width:100px;height:100px;border:1px solid red;position:inherit;top:0px;left:0px; }

  浏览器显示:

 

我们发现,子标签具有和父标签同样的position属性值---fixed,子标签的fixed使它显示在了相对于浏览器窗口进行定位的top:0px; left:0px;位置

 

 三、总结与补充

1.关于relative的补充

 关于前两点举个栗子

给body标签设置内边距和外边距,观察相对定位元素和绝对定位元素的显示情况 inherit body{margin:10px;padding:10px; }.relative{width:100px;height:100px;border:1px solid red;position:relative;top:0px;left:0px; }.absolute{width:100px;height:100px;border:1px solid black;position:absolute;top:0px;left:0px; }

 

网页显示:

我们发现元素:

受body标签内外边距的影响,显示在了元素:
的右下方

 

关于第三点再举个栗子

  我们将中间的div设置为relative z-index /*{margin:0px;padding:0px; }.yellow{width:100px;height:100px;background-color:yellow; }.relative_red{width:100px;height:100px;background-color:red;position:relative;left:200px; }.black{width:100px;height:100px;background-color:black; }

  网页显示:

为了对比,我们将中间div的relative改为absolute:

z-index /*{margin:0px;padding:0px; }.yellow{width:100px;height:100px;background-color:yellow; }.absolute_red{width:100px;height:100px;background-color:red;position:absolute;left:200px; }.black{width:100px;height:100px;background-color:black; } 点击查看修改之后的代码

 

  网页显示:

我们发现,设置position:relative的div在原来的文档流上,仍然占有空间,而设置position:absolute的div在文档流上不再占有空间

 

2.关于绝对定位元素的补充

栗如:

未设置position的标签

 尽管给它加了width和height属性,但它还是作为内联元素,width和height属性无效,所以网页显示空白

 

添加position:absolute生成绝对定位元素之后

 

 

标签同时变成了块状元素

 

3.top,right,left,bottom属性

4.z-index属性

因为先写的定位元素会被后写的定位元素覆盖,因此我们需要设置定位元素的堆叠顺序,是其按照我们想要的覆盖方式进行显示

举个大栗子: z-index /*{margin:0px;padding:0px; }.red{width:100px;height:100px;background-color:red;position:absolute;top:0px;left:0px;z-index:5; }.black{width:100px;height:100px;background-color:black;position:absolute;top:0px;left:0px;z-index:3; }.blue{width:100px;height:100px;background-color:blue;position:absolute;top:0px;right:0px;z-index:-1; }.no-position-yellow{width:1500px;height:1000px;background-color:yellow; }

  网页显示:

我们可以看到只有背景为红色和黄色的元素显示了,并且红色元素堆叠在黄色元素上方,因为黑色元素的z-index小于红色元素的z-index,而它们位置相同,因此红色元素将黑色元素完全覆盖了.

对于蓝色元素,因为他的z-index为负数,所以它直接被标准流中的黄色元素覆盖.

 

四、最后

我理解浅薄,如有错误或不足之处还请留言指出,十分感谢!

 

版权声明
本文为[路漫漫我不畏]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领