首页 > 代码库 > css中的绝对定位与相对定位
css中的绝对定位与相对定位
1、绝对定位
元素没有设定position属性，但依旧具有position属性，其值为static
绝对定位的元素从文档流中删除，并相对于其最近的position属性为absolute、relative、fixed的祖先元素定位，若没有这样的祖先元素，则根据浏览器定位，元素原来在文档流中的控件被关闭,其层叠通过z-index属性决定，此时对象不具有边距（margin）
<div class="content"> <div class="redBlock"></div></div>
.content{ width: 1000px; height:800px; margin:0 auto; border: 1px solid #000;}.redBlock{ width:300px; height:300px; position:absolute; top:200px; left:200px; background: red;}
显示效果如下
红色块元素并未相对于黑色边框的元素绝对定位，而是相对浏览器定位，原因是红色块的父级元素position属性并非为absolute、relative、fixed
解决方案就是红色块的父级元素position属性设置为absolute、relative、fixed
.content{ width: 1000px; height:800px; position:relative; margin:0 auto; border: 1px solid #000;}
显示效果如图所示
2、相对定位
参考父级元素配合top、right、bottom、left属性进行定位
.content{ width: 1000px; height:800px; margin:0 auto; border: 1px solid #000;}.redBlock{ width:300px; height:300px; position:relative; top:200px; left:200px; background: red;}
效果如图所示，红色块相对于黑色边框定位
相对定位时，若父级元素设置padding，则子元素相对于父级元素的内容区域定位，不包含padding
注：绝对定位和相对定位会使元素变为块级元素
css中的绝对定位与相对定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。