CSS中的position属性有什么用

这篇文章给大家分享的是有关CSS中的position属性有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于中大型企业的成都做网站、网站建设和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户千余家，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！

1、position的absolute（绝对定位）

在这里position的absolute绝对定位我们分两类来讲：

A：给元素定义了position:absolute，其父框架没有定义任何position属性。此时的绝对定位就是相对于页面四周最边缘来进行定位的，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置不受父框架的影响，只以页面四周边缘开始计算。代码如下：

   
   
   
   
position   
   
.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}   
   
   
    
   
   
   
position:absolute;   
left:100px;   
top:200px;

B：给元素定义了position:absolute，其父框架定义了position:absolute\position:relative\position:fixed属性。此时的绝对定位就是相对于父框架最边缘最边缘来进行定位的，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置只在父框架内做变化，代码如下：

position .demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative} position:absolute; left:100px; top:200px;

position .demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;} position:absolute; margin-left:100px; margin-top:200px;

position .demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;} position:absolute; margin-left:100px; margin-top:200px;

大橙子网站建设，新征程启航

CSS中的position属性有什么用

其他资讯