CSS之定位一(position属性)

  • 时间:2018-07-21 23:30 作者:前端唠唠嗑 来源:前端唠唠嗑 阅读:159
  • 扫一扫,手机访问
摘要:本文我们探讨涉及定位的position属性。首先我们来看一下position对应的值及其含义(表1)。表1:position对应值其中static是默认值,当元素未定义position或者定义position值为static时,该元素内定义的top, bottom, left, right 和 z-

本文我们探讨涉及定位的position属性。首先我们来看一下position对应的值及其含义(表1)。

CSS之定位一(position属性)

表1:position对应值

其中static是默认值,当元素未定义position或者定义position值为static时,该元素内定义的top, bottom, left, right 和 z-index无效。

relative表示相对定位,在文档流中依然占有空间,其参考对象是离该元素最近的父元素。图1表示父元素的position值变化时,子元素(position=relative)与父元素的相对位置,由图可以看出其相对位置不随父元素的position值变化而变化。

CSS之定位一(position属性)

图1:relative子元素位置变化

图1中外框和除position属性值不一样外,其余css属性均一致,其内外框html和相同部分css见图2。

CSS之定位一(position属性)

图2:内外框html和相同部分css

absolute表示绝对位置,其在文档流中不占空间,其参考对象是离该元素最近的position值不是static的父元素。由图3可以看出。

CSS之定位一(position属性)

图3:absolute子元素位置变化

图3中外框和除position属性值不一样外,其余css属性均一致。其内外框html和相同部分css见图4。

CSS之定位一(position属性)

图4:内外框html和相同部分css

值得注意的是,当其父元素position值均为static或者者未定义时,其参考对象应该是document(浏览器视窗大小的矩形)而不是网上所说的body元素或者者html元素。为验证以上说法 我们设置下面三组对照,代码如图5所示,其中.fixed和.absolute的css样式如图6所示。.absolute始终完全覆盖在.fixed上,由此可见.absolute的位置没有随html元素和body元素的变化而变化,因而其参考对象不是body元素或者者html元素。

CSS之定位一(position属性)

图5:三组对照

CSS之定位一(position属性)

图6:.fixed和.absolute的css样式

fixed表示固定定位,相似于absolute,但是其是根据浏览器窗口定位的。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部