CSS position定位

今天和大家分享一下position定位的相关知识

 

1、主要的属性：relative  absolute fixed

relative：就是相对自己当前的位置定位，不会脱离文档流

absolute：相对当前的父元素定位，如果没有就相对于文档定位，脱离文档流（不占据空间）

fixed：固定定位，元素不会随页面进行滚动（如果有滚动条的情况下）

 

2、使用方法

1、父元素relative  子元素absolute

　　子元素会在父元素中产生相对定位，left>0 元素右移，top>0元素下移，负值相反

2、利用定位使元素居中

　1、子元素设置absolute，父元素relative

　　这里的子元素可以是图片，或者一个div，css样式如下：

　　子元素{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}

　　父元素{position:relative;}

　　注意：这里的子元素如果同时设置了浮动，要清除浮动（万能清除法：元素::after{content:"";display:block;height:0;overflow:hidden;visibility:hidden;}元素{zoom:1;}）