position属性

来源:互联网 发布:照片音乐制作软件下载 编辑:程序博客网 时间:2024/05/09 08:17

position是设置元素的定位方式。有四个可选属性。

1.static
(静态定位)是默认值。有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。
2.relative
相对定位,相对于自己的位置偏移。不会影响其他元素的位置、大小的变化。
这里写图片描述
3.absolute
绝对定位,相对于非static(也就是说是relative/absolute/fixed三者之一)最近的父级元素。
这里写图片描述
元素的位置可以通过left、right、top、bottom属性来规定。
absolute元素脱离了文档结构。
absolute元素会悬浮在页面上方,会遮挡住下方的页面内容。
查文档看到

  1. 设置absolute会使得inline元素被“块”化。
  2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多;
    体会不深,希望以后学习中能多注意到。

4.fixed
一般相对于浏览器。
这里写图片描述
元素的位置可以通过left、right、top、bottom属性来规定。
不论窗口滚动与否,元素都会留在那个位置。

原创粉丝点击