1 相对定位
① 如何设置相对定位
position: relative;
② 相对定位元素定位的参考点
没有定位之间的位置
③ 相对定位元素的特点
1. 不会脱离文档流 2. 不会影响元素原来的显示模式 3. 可以使用 left、right、top、bottom 调整元素的位置 4. 即使相对定位元素调整了位置,其他相邻元素仍然按照它原来的位置进行排列
注意: left 与 right 不要同时设置,top 和 bottom 不要同时设置!
2 绝对定位
① 如何设置绝对定位
position: absolute;
② 绝对定位元素定位的参考点
1. 参考包含块进行定位 2. 普通元素包含块是父元素 绝对定位元素的包含块是第一个定位的祖先元素,如果祖先元素没有定位的,包含块是整个页面
③ 绝对定位元素的特点
1. 脱离文档流 2. 不论元素原来的显示模式是什么,设置绝对定位之后,拥有绝对定位元素的特点 3. 绝对定位元素默认宽高被内容撑开,可以完美设置宽高以及内外边距,没有外边距塌陷合并,左右外边距auto不会居中 4. 可以使用 left、right、top、bottom 调整元素的位置
注意:
如果绝对定位元素宽度固定,同时设置 left 和 right 只有 left 生效;如果绝对定位元素没有固定宽度,同时设置 left 和 right 会都生效。
如果绝对定位元素高度固定,同时设置 top 和 bottom 只有 top 生效;如果绝对定位元素没有固定高度,同时设置 top 和 bottom 会都生效。
3 固定定位
① 如何设置为固定定位
position: fixed;
② 固定定位的元素定位参考点
1. 参考包含块进行定位 2. 固定定位元素的包含块是视口
③ 固定定位元素的特点(同绝对定位)
1. 脱离文档流 2. 不论元素原来的显示模式是什么,设置固定定位之后,拥有固定定位元素的特点 3. 固定定位元素默认宽高被内容撑开,可以完美设置宽高以及内外边距,没有外边距塌陷合并,左右外边距auto不会居中 4. 可以使用 left、right、top、bottom 调整元素的位置
注意:
如果固定位元素宽度固定,同时设置 left 和 right 只有 left 生效;如果固定定位元素没有固定宽度,同时设置 left 和 right 会都生效。
如果固定定位元素高度固定,同时设置 top 和 bottom 只有 top 生效;如果固定定位元素没有固定高度,同时设置 top 和 bottom 会都生