css基础布局复习笔记（二）定位

 

相对定位

CSS position属性用于指定一个元素在文档中的定位方式。 top ， right ， bottom  和  left  属 性则决定了该元素的最终位置。

相对定位 position:relative;

相对于元素自身没有定位之前的位置进行位移！

注意：relative给百分比的问题,父级没有高度的时候，百分比不起作用！

特性：

1.不使元素脱离文档流 

2.不影响元素本身特性，行内还是行内，块级还是块级

 

---

绝对定位

相对于已经定位的父元素进行定位   

特性：

1.完全脱离文档流  

2.行内元素支持宽高  

3.块级元素内容撑开宽高  

4.没有祖先元素则相对于body  

5.一般配合相对定位使用  

6.绝对定位的元素的位置相对于最近的已定位祖先元素  

7.margin:auto;失效

扩展 ­ 如何使一个盒子在页面中百分之百居中呢？

/*第一种方法*/ 
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px; 

/*第二种方法*/ 
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0; 

---

固定定位 fixed

相对浏览器窗口定位！

---

z-­index 默认auto 后来居上

1.z-­index 可以调换两个层的上下位置关系

2.值可以为正，也可以为负，值越大，越在上面 默认值=0

3.只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！

4.z-­index:只对定位的元素有效，其它元素均无效