Positioning(定位)
定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作
方式,这取决于定位方法.
四种定位方式
- Static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。
- Fixed(固定) 定位
固定定位相对于浏览器可视窗口进行定位。固定定位后自动变成行块元素;固定定位元素可以成为其后代绝对定位元素的
定位参照物;固定定位的元素的位置不受浏览器滚动条的影响。
- Relative(相对) 定位
a. 相对定位的参照物是元素没有发生定位前本应该出现的位置。
b.元素相对定位后其原来位置仍要保留,其它元素不得占用。
使用情况
1.元素想偏移。
2.元素要做为其绝对定位后代元素的参照物时。
- Absolute(绝对定位) 定位
a.元素绝对定位后自动变成行块元素。
b.绝对定位元素的父元素,计算宽高时将忽略绝对定位的子元素。
c.绝对定位的元素往往要配合使用left /right/top/bottom进行位置设定。
d.绝对定位的参照物是:离他最近的且设置了position值为relative/fixed/absolute之一的先祖元素,
如果没有这样的先祖元素 为参照物,那么参照物就是html。
e.绝对定位的元素,高度宽度如果设为百分比,那么这个百分比是相对于其定位参照物的高度宽度,而非
其父元素.
f.元素绝对定位后,设置left/right/top/bottom如果为百分比那么百分比是相对于其参照物的宽高来
计算的,而非自身的宽度。
g.绝对定位的元素,会遮挡处于其后面的标准流元素的内容.
h.可以通过z-index属性来控制定位元素与浮动元素在z轴方向上的叠加顺序, 但不能控制标准文档流元素.