2021-01-05 09:18:22 +08:00
|
|
|
|
# 定位(position)
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
### 为什么要使用定位
|
|
|
|
|
|
|
|
|
|
|
|
请问以下状况用标准流或者浮动可以实现吗？
|
|
|
|
|
|
|
|
|
|
|
|
- 想让广告右下角的切换的那三个点图标 在广告框内自由移动位置，并且会压住下面的盒子 覆盖在最上面
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 不管滚动条滚动到什么位置 ，元素都始终固定在原来的位置不变
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**结论** ：
|
|
|
|
|
|
|
|
|
|
|
|
1. 以上的两种情况 用普通的文档流和浮动都不能快速实现，此时要用定位来实现
|
|
|
|
|
|
|
|
|
|
|
|
2. 浮动和定位的区别
|
|
|
|
|
|
|
|
|
|
|
|
浮动可以让多个块级盒子一行内没有缝隙排列显示 经常用于
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
position 用来定义元素在网页上的位置，常用的有五种：
|
|
|
|
|
|
|
|
|
|
|
|
- static 正常的页面流，position属性的默认值
|
|
|
|
|
|
- absolute 绝对定位
|
|
|
|
|
|
- relative 相对定位
|
|
|
|
|
|
- fixed 固定定位
|
|
|
|
|
|
- sticky 粘性布局
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
语法：
|
|
|
|
|
|
|
|
|
|
|
|
position:定位方式
|
|
|
|
|
|
|
|
|
|
|
|
方向：偏移值
|
|
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### static
|
|
|
|
|
|
|
|
|
|
|
|
这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
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根元素定位
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
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覆盖
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
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 属性进行规定
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<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>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 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>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
滚动前：
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
滚动后：
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业一
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业二
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业三
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业4
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业5
|
|
|
|
|
|
|
|
|
|
|
|
|
