前端基础学习笔记 定位

相对定位

CSS position属性用于指定一个元素在文档中的定位方式。

top ， right ， bottom  和  left  属性则决定了该元素的最终位置。

如下：未定位前的位置在定位后的位置左面50px。

.box1{
    position:relative;/*relative = 相对的意思*/
    left:50px;
}

特性

1. 不使元素脱离文档流 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级
2. 不影响元素本身特性，行内还是行内，块级还是块级
3. 层级未设置时，后来居上，后面设置的定位层级在上面。

绝对定位

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

特性

1. 完全脱离文档流
2. 行内元素支持宽高
3. 块级元素内容撑开宽高，不会超过定位父级边界的临界点
4. 没有祖先元素则相对于body
5. 一般配合相对定位使用
6. 绝对定位的元素的位置相对于最近的已定位祖先元素
7. margin:auto;失效

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

第一种方法，先让盒子50%移动，但不是居中，然后用margin再进行微调,-自己宽高的一半

第二种方法，margin当做和事老，距离四个边界一样的高度，但不建议用此骚操作。

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

固定定位 fixed

position:fixed;

相对浏览器窗口定位

z-­index

层级只有定位元素才有

1. z-­index 可以调换两个层的上下位置关系
2. 值可以为正，也可以为负，值越大，越在上面 默认值=0
3. 只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！
4. z­-index:只对定位的元素有效，其它元素均无效