Loading
0

css中position定位的一些理解

网页布局中常用定位,而定位很多时候总是和浮动与文档流等内容交织在一起,灵活使用定位与文档流的各种特性可以营造除不同的效果。

  1. 元素有所谓块级和内联(行内)以及行内块的分别,但这只是对于元素默认表现形式的一种约定,通过display样式可以让元素的表现形式随意变化。块级元素能够变成行内块,行内元素也可以变成块级。
  2. 无论什么类型的元素,当设置position属性设为absolute的时候,都会自动变成块级元素。
  3. absolute称之为绝对定位,会让自己脱离当前的文档流,然后去寻找上级节点中某一个带着定位属性的父节点,以这个父节点做定位。
  4. 定位的原点为元素的左上角。
  5. 所谓脱离文档流的意思,通俗的讲就是这个块级元素原本所占用的位置现在不占了。
  6. HTML里面元素排列的习惯是什么样的呢?只要前面没东西了,就尽量往前面移动。例如左面没有东西就往左贴,上面没东西就尽量往上面走。
  7. 结合3和4的特点,当一个元素脱离了文档流之后,位于其后面的元素将马上移动,占据原本被该元素所占据的位置。
  8. html中的元素并不是平面上的,只不过受文档流限制被约束在了平面上,当文档流被打破,结界不复存在的时候,这些邪恶的元素们就要开始搞大新闻了。他们在垂直方向的排列按理说应该是个随机的过程,谁踩着谁就看浏览器了。
  9. 如果想人为修改通常理解中的覆盖关系,请在css中加入z-index:[num],例如
1
2
3
4
div{
display:absolute;
z-index:1;
}

这个num可以是负数,数值越大层的位置就越高,会覆盖掉数值小的层。

声明:本文为原创,作者为 刘国栋,转载时请保留本声明及附带文章链接:http://www.liuguodong.net/549.html

最后编辑于:2016/11/30作者: 刘国栋

刘国栋

刘国栋个人博客,是记录博主学习和成长的个人博客网站,关注于web前端和WordPress经验与技巧方面的学习和分享,也会分享一些优秀的个人博客模版。

还没回应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

扫一扫关注刘国栋个人博客

扫一扫关注刘国栋个人博客