# 定位(position)

### 为什么要使用定位

请问以下状况用标准流或者浮动可以实现吗？

- 想让广告右下角的切换的那三个点图标 在广告框内自由移动位置，并且会压住下面的盒子  覆盖在最上面

![image-20210118113158799](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118113158799.png)



- 不管滚动条滚动到什么位置 ，元素都始终固定在原来的位置不变

  ![image-20210118113652011](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118113652011.png)

**结论** ：

1. 以上的两种情况 用普通的文档流和浮动都不能快速实现，此时要用定位来实现

2. 浮动和定位的区别

   浮动可以让多个块级盒子一行内没有缝隙排列显示 经常用于

   



position 用来定义元素在网页上的位置，常用的有五种：

- static				正常的页面流，position属性的默认值
- absolute          绝对定位                       
- relative            相对定位
- fixed                 固定定位
- sticky                粘性布局

语法：

position:定位方式   

方向：偏移值



### static 

这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。

![image-20210104095232481](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104095232481.png)

html：

<body>

    <div></div>
    <div></div>
    <div></div>
</body>

css：

```
<style>
/*
	去掉浏览器默认的标签自带样式
*/
        *{
            margin:0;
            padding: 0;
        }
/*
	position不写默认是static
*/
        div{
            width:60px;
            height: 60px;
            background:red
        }
    </style>
```



### absolute

absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定元素的位置

当父元素不定义position属性时，选中的元素依照整个网页的html根元素定位



![image-20210104101111002](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104101111002.png)

html 不变 css如下：

```
*{
    margin:0;
    padding: 0;
}
div{
    width:60px;
    height: 60px;
    background:red;
}
.box1{
    background: gray;
    position: absolute;
}
```

上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流  然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖

![image-20210104102616301](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104102616301.png)

html：

```
<body>
    <div class="box1"></div>
    <div></div>
    <div></div>
</body>
```

css:

```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 60px;
            background:red;
        }
        .box1{
            background: gray;
            position: absolute;
            right:0px;
        }
    </style>
```





### relative

相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定

![image-20210104104339420](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104104339420.png)

```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 60px;
            background:red;
        }
        .box1{
            background: gray;
            position: absolute;
            right:90px;
        }
    </style>
```



> 常用技巧是给父元素定义绝对定位  子元素定义相对定位   这样就会使子元素相对于父元素定位



### fixed

fixed 固定定位，将某个元素固定在浏览器的某个位置，无论如何滚动滚动条，元素位置不变。 即元素相对于可视窗口固定位置

html:

```
<body>
    <div class="box1"></div>
    <div></div>
    <div class="box2"></div>
</body>
```

css:

```
<style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 600px;
            background:red;
        }
        .box1{
            background: gray;
            position: fixed;
            left: 90px;
            height: 60px;
        }
        .box2{
            background: gold;
        }
    </style>
```

![image-20210104113658613](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104113658613.png)





### sticky 粘性布局（拓展）

从效果来说 sticky更像是混合体，使用sticky的元素在页面滑动到临界点之前，表现为relative,  到达临界点之后，表现为fixed

#### css 使用：

> 1. 用 position: sticky 声明目标元素
> 2. top/bottom/left/right   任意一个赋予有效值 ，甚至是负值也可以



注： 如果元素定义了overflow，那么sticky就会失效

html:

```
<body>
    <div class="box1"></div>
    <div></div>
    <div class="box2"></div>
</body>
```

css:

```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 600px;
            background:red;
        }
        .box1{
            background: gray;
            height: 60px;
            position: sticky;
            top: 10px;
        }
        .box2{
            background: gold;
        }
    </style>
```

滚动前：

![image-20210104115013701](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104115013701.png)



滚动后：

![image-20210104115040341](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104115040341.png)

作业一

![image-20210118172837051](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172837051.png)



作业二

![image-20210118172910611](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172910611.png)



作业三

![image-20210118172934691](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172934691.png)



作业4

![image-20210118173020931](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118173020931.png)



作业5

![image-20210118173115050](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118173115050.png)