【Web】CSS学习笔记之定位*

一、定位

定位就是将盒模型按照指定位置加载

相对定位不脱离标准流，绝对定位和固定、定位是脱离标准流的。

position

作用：设置盒子针对某个参考元素进行位置偏移设置

属性值：

relative： 相对定位
absolute： 绝对定位
fixed： 固定定位

如果定位的元素想要发生位置偏移，必须搭配偏移量属性进行设置

水平方向设置：left、right

垂直方向设置：top、bottom

1、相对定位

属性值：relative，相对的意思

参考元素：自身盒子的原始位置

position: relative;
left: 100px;
top: 100px;
1
2
3

相对的定位的性质：是不脱离标准流状态的，不会让出原始位置，盒子会在新的指定位置加载

需要注意的是

1. 偏移量属性值是有正负之分的

正数：表示偏移方向和属性名正好相反

负数：表示偏移方向和属性名正好相同

position: relative;
left: -50px;
top: -50px;
1
2
3

2. ==在水平方向不能同时设置left和right属性，==如果同时设置，只会加载left属性，垂直方向如果top和bottom同时设置，只会加重top属性

left: -50px;
top: -50px;
right: -50px;	//无效
bottom: -50px;	//无效
1
2
3
4

提示：使用偏移量的时候，从水平和垂直方向各挑选出一个属性进行组合

3. 相对定位的参考位置是自身元素，此时就会有不同的参考点

left、top： 使用的是偏移之前的左上顶点作为参考点

left: 100px;
top: 100px;
1
2

left、bottom：使用偏移前的左下顶点作为参考点

left: 100px;
bottom: 100px;
1
2

right、top：使用偏移前的右上顶点作为参考点

right: 100px;
top: 100px;
1
2

right、bottom：使用偏移前的右下顶点作为参考点

right: 100px;
top: 100px;
1
2

2、绝对定位

属性值：absolute，绝对的意思

参考元素：参考的是距离最近的有定位的祖先元素，如果所有的祖先元素都没有设置定位，则参考body。

如果想要发生位置偏移，必须搭配偏移量属性

position: absolute;
top: 50px;
left: 50px;
1
2
3

绝对定位的性质：绝对定位元素是脱离了标准流的，让出了标准流的位置，后面的标准流元素会占领该元素脱标之前的位置，此时该元素脱标后不再受标准流的控制（比如span标签绝对定位后可以设置宽度和高度了），任意标签都可以设置绝对定位

需要注意的是绝对定位的参考点是不固定的，又可能是某个祖先级、也又可能是body

1. 以body为参考元素的参考点

如果该绝对定位元素的所有祖先元素都没有设置定位，此时body就是该元素的参考点

参考点：根据偏移方向组成的body页面首屏的四个顶点

如果top参与的绝对定位，参考点是body左顶点或者右上顶点

left、top参考点是body时，参考位置是body的左上顶点，对比点就是自身的左上顶点

top: 50px;
left: 50px;
1
2

right、top参考点是body时，参考位置是body的右上顶点，对比点就是自身的右上顶点

right:50px;
top: 50px;
1
2

left、bottom参考点是body时，参考位置是body的左下顶点，对比点就是自身的左下顶点

left:50px;
bottom:50px;
1
2

right、bottom参考点是body时，参考位置是body的右下顶点，对比点就是自身的右下顶点

right: 50px;
bottom: 50px；
1
2

2. 以祖先元素为参考点进行偏移

如果某个某几个祖先元素有定位，不论是什么类型（区分相对定位或者绝对定位等等），在HTML结构中谁距离目标定位元素最近，谁就是参考元素

<div class="box1">				相对定位
    <div class="box2">			绝对定位
        <div class="box3">		没有定位
            	<p>p>			目标元素，绝对定位，参考的是box2
        div>
    div>
div>
1
2
3
4
5
6
7

作为绝对定位参考点，祖先元素可以是相对定位、绝对定位或者固定定位，不区分任何类型

后代和和祖先级组合方式一共有三种： 子绝父相（常用），子绝父绝，子绝父固

由于相对定位元素不脱标，导致结构更加稳定，大部分都是用子绝父相

祖先元素的参考点和之前的body的类似，区别就是范围更小，小到了某个有定位的元素上

3、固定定位

属性值：fixed

参考元素；浏览器的窗口

参考点：是根据偏移组合方向不同，分别为浏览器窗口的四个顶点

position: fixed;
bottom: 100px;
left:100px;
1
2
3

性质：固定定位元素是脱标的，让出标准流位置，可以设置宽度和高度，也可以指定任意位置，不设置宽度和高度只能被内容撑高（宽）

二、绝对定位使用场景

1、制作压盖

p{
            width: 400px;
            height: 300px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            line-height: 300px;
            text-align: center;
            margin-top:-150px;
            margin-left: -200px;
        /*下面的两个是CSS3的*/
            border-radius: 8px;
            box-shadow: 5px 1px 3px 1px rgba(0,0,0,.5);	//设置阴影
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、居中

绝对定位居中，很重要

通过对父亲的百分比定位设置，然后margin为负自己宽度（高度）的一半，从而实现居中显示

如果：绝对定位偏移属性属性值为百分比，百分比参考的距离最近的有定位的祖先元素的宽度或者高度的百分比

div{
    width: 400px;
    height: 100px;
    background:pink;
    margin: 100px auto;
    position: relative;	//
}
div p{
    width: 100px;	//
    height: 100px;	
    left: 50%;	//
    margin-left: -50px;	//
    background-color: gold;
    position: absolute;	//
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

首先设置left值为50%;

left:50%;
1

第二步将margin设置为负的自己宽度的一半

margin-left: -50px; 
1

三、压盖顺序

1、默认的压盖顺序

有定位的没有定位，标准流的，如果同时叠到一起了，谁权重更高

此时关于优先级，定位元素是根据HTML的书写顺序决定的

<div class="box1">div>		浮动、或者标准流
<div class="box2">div>		相对
<div class="box3">div>		绝对
<div class="box4">div>		固定
1
2
3
4

2、自定义压盖顺序

z-index属性是专门用于设置定位元素的压盖层级的

属性值：数字，数字表示压盖层级

div.box1{
    width: 400px;
    height: 400px;
    background:pink;
    float: left;
}
div.box2{
    width: 300px;
    height: 300px;
    background: skyblue;
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
}
div.box3{
    width: 200px;
    height: 200px;
    background:orange;
    position: absolute;
    top: 0;
    left:0;
    z-index: 2;
}
div.box4{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}
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

1. 属性值大的压盖属性值小的，设置z-index属性的压盖没有设置z-index
2. 如果属性值相同，那么HTML后写的压盖先写的
3. 如果元素没有定位，则z-index失效

z-index: 10;
1

如果是父子盒模型，不涉及关于覆盖互相比较权重的问题

四、案例-轮播图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style:none;
        }
        .outer{
            width: 800px;
            height: 450px;
            border: 5px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .outer ul li{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .outer ul li.current{
            display: block;
        }
        .outer .btns a{
            text-decoration: none;
            color:#fff;
            position: absolute;
            font-size: 40px;
            font-family: serif;
            top: 50%;
            background-color: rgba(255,255,255,0.4);
            width: 40px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            margin-top: -40px;
        }
        .outer .btns a.right{
            right: 0;
        }
        .circle{
            width: 180px;
            height: 20px;
            position: absolute;
            left: 0;
            bottom: 10px;
            background: rgba(255,255,255,0.4);
            left: 50%;
            margin-left: -90px;
            padding: 5px 10px;
            border-radius: 15px;
        }
        .circle ol li{
            width: 20px;
            height: 20px;
            float: left;
            background: #fff;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
            margin: 0 5px;
            cursor: pointer;
        }
        .circle ol li.current{
            background-color: gold;
            color: #fff;
        }
    style>
head>
<body>
    <div class="outer">
        <ul>
            <li class="current"><img src="images/lunbo/img1.jpg" alt="">li>
            <li ><img src="images/lunbo/img2.jpg" alt="">li>
            <li ><img src="images/lunbo/img3.jpg" alt="">li>
            <li ><img src="images/lunbo/img4.jpg" alt="">li>
            <li ><img src="images/lunbo/img5.jpg" alt="">li>
            <li ><img src="images/lunbo/img6.jpg" alt="">li>
        ul>
        <div class="btns">
            <a href="#" class="left"><a>
            <a href="#" class="right">>a>
        div>
        <div class="circle">
            <ol>
                <li class="current">1li>
                <li>2li>
                <li>3li>
                <li>4li>
                <li>5li>
                <li>6li>
            ol>
        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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

补充

1. border-radius：属性是css3属性，属性作用是设置盒子的圆角状态，50%是圆形，前提盒子必须是正方形
   属性值可以是百分比或者数值

2. cursor：pointer：属性作用指的是鼠标移上之后的指针状态

3. transition:all 0.4s ease 0s;： CSS3属性，作用是给盒子运动过程中有过渡效果

4. transform:scale(1.2)：CSS3属性，作用是放大元素

/* 溢出文字省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #4d4d4d;
1
2
3
4
5
6
7

//外链式样式
<link rel="stylesheet" href="***.css">
1
2