15-定位

一、定位

1、定位有三种

1.相对定位 2.绝对定位 3.固定定位

position 属性把元素放置到一个静态的、相对的、绝对的或固定的位置中。

2、position语法

position : static relative absolute fixed

3、position参数

值　　　　描述
static 　　默认。位置设置为static的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative 　　位置被设置为relative的元素，可将其移至相对其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边20个像素的位置。
absolute 　　位置设置为absolute的元素，可定位于相对父元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed 　　位置被设置为fixed的元素，可定位于相对浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

二、相对定位

相对定位：相对于自己原来的位置定位

position : relative;
left ：10px;

1、现象和使用：

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

2、特性：

不脱标
形影分离
老家留坑（原来的位置也占着）

所以说相对定位，在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

3、用途：

微调元素位置
做绝对定位的参考（父相子绝）绝对定位会说到此内容。

4、参考点：

自己原来的位置做参考点。

三、绝对定位

position : absolute;
top : 10px;

1、特性：

脱标
有遮盖效果，提升了层级。

设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

2、参考点(重点)：

2.1、单独一个绝对定位的盒子
当使用top属性描述的时候，是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
当使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

2.2、以父辈盒子作为参考点
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
如果父亲设置了定位，那么以父亲为参考点。如果父亲没有设置定位，那么以设置定位的父辈元素为参考点
不仅仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点

注意了：父绝子绝，没有实战意义，做网站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding

3、作用：

页面布局常见的“父相子绝”，一定要会！！！！

四、绝对定位的盒子居中

当做公式记下来吧！
    .box{
         100%;
        height: 100px;
        background-color: #0f0;
        position: relative;
    }
    .box-1{
         960px;
        height: 100px;
        background-color: #00f;
        position: absolute;
        left: 50%;
        margin-left: -480px;
    }
/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%;
margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
}

    <div class="box">
        <div class='box-1'></div>
    </div>

五、固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

脱标
遮盖，提升层级
固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用：

返回顶部栏
固定导航栏
小广告

例子：返回顶部栏

<style>
.back_top{
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background-color: #00aced;
    position: fixed;
    bottom: 30px;
    right: 30px;
</style>

<div class="back_top">回到顶部</div>

六、z-index

只有设置了定位后，z-index属性才会起作用，没有定位的元素是不会涉及到z-index的

有四大特性

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就压着别人，定位的元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

例子：

father1里面有box1，father2里面有box2
father1的z-index值小于father2的，那么box1的z-index值比box大也没用，还是被box2压在下面

<head>
   <style>
        div.father1{
            width: 400px;
            height: 400px;
            background-color: darkmagenta;
            position: relative;
            z-index:10;
        }
         div.father2{
            width: 400px;
            height: 400px;
            background-color: darkorange;
             position: relative;
             z-index:20;
        }
        div.box1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 350px;
            left: 450px;
            z-index: 999;
        }
        div.box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: 480px;
            z-index: 20;
        }
    </style>
</head>

<body>
    <div class="father1">
        <div class="box1"></div>
    </div>
    <div class="father2">
        <div class="box2"></div>
    </div>
</body>