css中的相对定位与绝对定位的区别
2016-04-03 21:22
471 查看
1.绝对定位
position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序。
2.相对定位
position: relative;相对定位:相对定位是相对于元素在文档中的初始位置;
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序。
2.相对定位
position: relative;相对定位:相对定位是相对于元素在文档中的初始位置;
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
相关文章推荐
- Word中利用VBA导入样式
- CSS中的长度值
- 简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性
- 深入理解letter-spacing和word-spacing2
- CSS --- 圣杯布局
- css常用命名参考
- 深入理解CSS过渡transition
- CSS里的单位
- 【转】CSS
- CSS+DIV定位详细分析(relative,absolute,static,fixed)
- 用CSS border相关属性画三角形
- radial-gradient CSS3的蛋疼的径向渐变
- [HeadFirst-HTMLCSS学习笔记][第十四章交互活动]
- [HeadFirst-HTMLCSS学习笔记][第十四章交互活动]
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- [HeadFirst-HTMLCSS入门][第十一章布局排版]
- [HeadFirst-HTMLCSS入门][第十一章布局排版]
- [HeadFirst-HTMLCSS入门][第十章div,span]
- [HeadFirst-HTMLCSS入门][第九章盒模式]