网页中的定位

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;

转载于:https://www.cnblogs.com/alexjava/p/11514585.html