网页中的定位
1.1.1 网页中的定位类型:
a) 静态定位(static)是默认定位
b) 相对定位(relative)
c) 绝对定位(absolute)
d) 固定定位(fixed 浏览器对该定位存在兼容性问题)
e) 参照物
1.1.2 相对定位
position:relative;
top:20px; 参照顶部发生位置偏移20px
left:10px; 参照左边发生位置偏移 10px
right和bottom不常用。
注意:
- 相对定位是参照当前元素最近上一次的位置所发生的偏移
- 发生相对定位的元素不会影响其他元素
- 发生了相对定位的元素还是处于普通文档流
例如:相对定位前:
相对定位后:
1.1.1 绝对定位
position:absolute;
top:20px; 参照顶部发生位置偏移20px
left:10px; 参照左边发生位置偏移 10px
注意:
- 发生绝对定位的元素参照最近发生定位的父元素,如果所有逐层找的父元素都不存在定位则直接参照body元素。
- 最近发生定位的父元素作为参照物,它所发生的定位只能是相对(relative)或绝对(定位),单纯是位置移动不能作为参照物。
- 发生定位的父元素只是发生定位,但不见得要发生偏移量(只定位不发生位置偏移);
- 发生绝对定位的元素会脱离文档流,对其他元素有影响。
例如:绝对定位前
绝对定位后:黄色框发生定位,所以作为参照物
1.1.1 固定定位
固定定位和绝对定位基本是一致的,固定定位的元素不会随着浏览器的滚动条而滚动。常见的网页广告就是这样做的。
position:fixed;
top:40px;
left:300px;