17.前端笔记-CSS-定位

1、为什么要定位

先看看以下这些场景是否可以用标准流或浮动实现
（1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
（2）滚动窗口时，某些盒子是可以固定在屏幕某个位置的
以上这种场景使用标准流和浮动无法快速实现，此时需要引入定位进行实现
浮动：可以让多个块级盒子一行没有缝隙排列展示，经常用于横向排列盒子
定位：可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

2、定位组成

定位：将盒子定在某个位置，定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式
边偏移：决定了该元素的最终位置

2.1 定位模式

决定元素的定位方式，通过css设置position属性

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.1.1 静态定位static

元素默认的定位方式，无定位的意思。还是按照标准流特性摆放位置，没有边偏移
因此定位在布局中很少用到

div{
	position:static;
}
1
2
3

2.1.2 相对定位relative(***)

相对定位是元素在移动位置时，是相对于它原来的位置来说的
（1）参照点是自己原来的位置(left:10px,表示左边相对于原来的位置偏移了10px)
（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置，与浮动不同）
（3）相对定位可以用来限制绝对定位

div{
	position:relative;
}
1
2
3

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            top:50px;
            left: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    style>

head>

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

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

原来：
在这里插入图片描述
相对偏移之后：

2.1.2 绝对定位（***）

绝对定位是元素在移动位置时，相对于它的祖先元素来说的
语法：

div{
	position:absolute;
}
1
2
3

特点：
（1）没有祖先元素或祖先元素没有定位，则以浏览器为准定位，见示例（1.1）和（1.2）
（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置，见示例（2.1）
（3）绝对定位会脱标，不再占用原先位置。其他标准流元素会占用原来绝对定位元素所在的位置 ,见示例（3.1）
（1.1）没有祖先元素：以浏览器为准定位

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    style>
head>
<body>
    <div class="son">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述
（1.2）有祖先元素，但祖先元素没有定位：以浏览器为准定位

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    style>
head>
<body>
    <div class="father">
        <div class="son">div>
    div>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述
（2.1）祖先元素有定位，以最近一级有定位的祖先元素作为参考
grandfather>father>son
grandfather有定位，father无定位

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            position: relative;
        }
        .father{
            width: 400px;
            height: 400px;
            background-color: green;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            bottom: 50px;
            left: 50px;
        }
    style>
head>
<body>
    <div class="grandfather">
        grandfather
        <div class="father">
            father
            <div class="son">sondiv>
        div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述
（3.1）绝对定位的元素会脱标

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            position: relative;
        }
        .box1{
            width:100px ;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 200px;
            top:200px
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="father">
        <div class="box1">box1div>
        <div class="box2">box2div>
    div>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

添加绝对定位之前：
在这里插入图片描述
添加绝对定位之后：脱标

2.1.3 固定定位fixed(***)

固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变
特点：

(1)以浏览器的可视窗口为参照点移动元素
和父元素没有关系
不随滚动而滚动
(2)固定定位不占用原先的位置（脱标）
固定定位可以看作是特殊的绝对定位
1
2
3
4
5

div{
	position:fixed;
}
1
2
3

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .png img{
            width: 100px;
            height: 100px;
            position: fixed;
            top:50px;
            left:0px;
        }
    style>
head>
<body>
    <div class="png">
        <img src="./1.jpg" alt="">
    div>
    <div>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
        <p>加油加油p>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

fixed固定定位

在这里插入图片描述

技巧：固定定位搭配版心右侧

算法：
（1）让固定定位的盒子left:50%,走到浏览器可视区的一半位置（版心）
（2）让固定定位的盒子margin-left:版心宽度的一半距离。版心右侧

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background-color: green;
        }
        .bar{
            background-color: pink;
            width: 100px;
            height: 100px;
            position: fixed;
            left:50%;
            margin-left: 400px;
        }

    style>
head>
<body>
    <div class="box">
        <div class="bar">div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

fixed固定到版心

2.1.4 粘性定位sticky

粘性定位可以看作是相对定位和固定定位的混合
实际不常用，IE不兼容。现在网页上看到的类似粘性定位的一般都是使用js实现

div{
position:sticky;
top:10px;
}
1
2
3
4

特点：
（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
（2）粘性定位占用原先位置（相对定位特点）
（3）必须添加top\bottom\left\right其中一个属性才生效

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            width: 100%;
            height: 1000px;
        }
        .nav {
            width: 800px;
            height: 50px;
            margin: 50px auto;
            background-color: green;
            position: sticky;
            top: 0;
        }
    style>
head>

<body>
    <div class="box">
        <div class="nav">导航栏粘性定位div>
    div>

body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

粘性定位sticky

2.2 边偏移

绝对盒子最终移动到什么位置
有top\bottom\left\right4个属性

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

3、子绝父相

子元素是绝对定位的话，父元素要用相对定位。
（1）子元素绝对定位，不会占用位置，可以放到父盒子的任何一个地方，不会影响其他的兄弟盒子
（2）父盒子需要加定位限制子盒子在父盒子内显示，否则子盒子就会以浏览器为基准进行偏移
（3）父盒子布局时，需要占有位置，因此选择绝对定位（不脱标）
总结：父级需要占用位置，因此是相对定位。子盒子不用占用位置，就是绝对定位

注意：子绝父相不是永远不变，如果父元素不需要站位置，子绝父绝也是可以的

4、定位的叠放顺序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用z-index控制盒子的前后次序（z轴）

div{
	z-index:1; 
}
1
2
3

（1）数值可以是正整数、负整数或0.默认是auto,数值越大，盒子越靠上
（2）如果属性值相同，则按照书写顺序，后来居上
（3）z-index值没有单位‘
（4）只有定位的盒子才有z-index属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .one{
            background-color: aquamarine;
            z-index: 2;
            top:100px
        }
        .two{
            background-color: skyblue;
            z-index: 1;
        }
        .three{
            background-color: green;
            left:100px;
        }
    style>
head>
<body>
    <div class="box one">onediv>
    <div class="box two">twodiv>
    <div class="box three">threediv>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

5、定位的拓展

5.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto实现水平居中
实现方法：
（1）需要定位的盒子挪到父盒子的50%
（2）需要定位的盒子向左挪动本身的一半宽度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            left:50%;
            margin-left: -100px;
            background-color: aquamarine;
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

5.2 定位特殊特性

绝对定位和固定定位与浮动类似
（1）行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
（2）块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        span{
            background-color: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
        }
        div{
            background-color: skyblue;
            position: fixed;
        }
    style>
head>
<body>
    <span>spanspan>
    <div>div内容div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

5.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

5.4 绝对（固定）定位会完全压住盒子

（1）绝对（固定）定位元素会压住下面的标准流盒子及盒子中的文字图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgba(147, 45, 94, 0.4);
            position: fixed;
        }
        p{
            background-color: bisque;
        }
    style>
head>
<body>
    <div>

    div>
    <p>我是标准流p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

（2）与浮动元素不同，浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里的文字或图片
原因：浮动产生的目的是做文字环绕效果的

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgba(147, 45, 94, 0.4);
            float: left;
        }
        p{
            background-color: bisque;
        }
    style>
head>
<body>
    <div>

    div>
    <p>我是标准流p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

相关阅读:
【C/C++】程序环境，探索程序的执行过程（习得无上内功《易筋经》的第一步）
REDO strand log LGWR worker
Nginx的http启动流程分析
 mac 安装java1.8
（附源码）python房屋租赁管理系统毕业设计 745613
AI框架的未来将何去何从，跟着MindSpore一起探讨其趋势
 MyBatis使⽤PageHelper（MySQL）
【PTA】《数据结构与算法》线性结构复习题
 BigDecimal 用法总结
 代码审计——任意文件下载详解（二）
原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128165116