CSS:走进position属性(二)

文章目录

4.绝对定位(absolute)
5.固定定位(fixed)
6.粘性定位(sticky)
- 补充：图层显示(z-index)

4.绝对定位(absolute)

1.在没有父元素或者父元素没有定位，绝对定位相对于当前屏幕的左上角。随着滚动条，离开当前屏幕，绝对定位就会失效。
先上效果
chrome-浏览器-显示效果：
在这里插入图片描述

HTML代码：

<body>
    
    <div class="box">
         <div>块级元素：div1div>
         <div class="div2">块级元素：div2div>
         <div>块级元素：div3div>
    div>
         
        <div class="div4">块级元素：div4div>
        <div class="div5">块级元素：div5div>
        <div class="div6">块级元素：div6div>
body>
1
2
3
4
5
6
7
8
9
10
11
12

CSS代码：

 .box{
            height:500px;
            background-color:yellow;
        }
        .box div{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:20px;
        }
        .div2{
            position:absolute;
            top:100px;
            left:240px;
        }
        
         .div3,.div4,.div5{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:20px;
        }
        .div4{
            position:absolute;
            top:120px;
            left:240px;
            background-color:rgba(0, 217, 255, 0.9);
        }
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

总结：div1.div2和div3演示父元素没有定位的情况。div4，div5和div6演示在没有父元素的情况。注意观察div2和div5的位置变化，可以了解到绝对定位始终相对于当前屏幕的左上角，并且脱离了文档流，且没有保留改变之前的位置，造成下面的元素自动补上。

2.父元素有定位时，绝对定位相对于父元素的左上角。
chrome浏览器-显示效果：
在这里插入图片描述
HTML代码：

<body>
    
    <div class="box">
         <div>块级元素：div1div>
         <div class="div2">块级元素：div2div>
         <div>块级元素：div3div>
    div>
body>
1
2
3
4
5
6
7
8

CSS代码：

.box{
            width:600px;
            height:500px;
            background-color:yellow;
            position:relative;
            margin:10px auto;
        }
        .box div{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:20px;
        }
        .div2{
            position:absolute;
            top:100px;
            left:240px;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

总结：观察输出效果，我先把整个父元素进行屏幕居中，还为父元素添加相对定位。而div2改变的位置并不是再次相对于屏幕左上角而是父元素的左上角。并且div3补上了原先div2的位置。

5.固定定位(fixed)

固定定位，顾名思义就是设置后，该元素始终固定在指定位置上，不在随着页面的滚动而移动。

chrome浏览器-显示效果：
变化前：
在这里插入图片描述
变化后：

HTML代码：

<body>
    
    <div class="box">
        
         <div class="div1">块级元素：div1div>
         <div class="div2">块级元素：div2div>
    div>
body>
1
2
3
4
5
6
7
8

CSS代码：

  .box{
            width:600px;
            height:20000px;
            background-color:yellow;
            /* position:relative; */
            margin:0 auto;
        }
        .box .div1{
            width:200px;
            height:200px;
            background-color:orange;
            position:fixed;
            top:100px;
        }
        .box .div2{
            width:200px;
            height:200px;
            background-color:orange;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

总结;注意观察前后变化，以及滚动条所在的位置。我们可以得出如下结论，固定定位相对于父元素，在屏幕上固定不变。并且脱离文档流的。

6.粘性定位(sticky)

粘性定位：来源于CSS3，对于之前的版本它属于新技术。所以相对的较低版本的浏览器存在兼容问题。

chrome浏览器-显示效果：
变化前：
在这里插入图片描述
变化中：

变化后：

HTML代码：

<body>
    
    <div class="box">
        
         <div class="div1">块级元素：div1div>
         <div class="div2">块级元素：div2div>
         <div class="div1">块级元素：div3div>
    div>
body>
1
2
3
4
5
6
7
8
9

CSS代码：

 .box{
            width:600px;
            height:20000px;
            background-color:yellow;
            position:relative;
            margin:0 auto;
        }
        .box .div1{
            width:200px;
            height:200px;
            background-color:orange;
           
        }
        .box .div2{
            width:200px;
            height:200px;
            background-color:red;
            position:sticky;
            top:0px;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

总结：还是先观察，找出相似以及不同之处。粘性定位和固定定位很相似，只是粘性定位不脱离文档流。在没有到达指定位置之前，它和静态定位一样，随着页面滚动而滚动。到达指定位置后，固定不在滚动。

补充：图层显示(z-index)

随着三D效果的出现，页面不仅存在X轴，Y轴还有Z轴。z-index：要解决的问题是，在多个元素重叠，该让哪一个元素显示在最外层。
默认x-index效果：
在这里插入图片描述
改变后：

HTML代码：

<body>
    
    <div class="box">
        
         <div class="div1">块级元素：div1div>
         <div class="div2">块级元素：div2div>
         <div class="div3">块级元素：div3div>
         <div class="div4">块级元素：div4div>
    div>
body>
1
2
3
4
5
6
7
8
9
10

CSS代码：

.box{
            width:600px;
            height:20000px;
            background-color:yellow;
            position:relative;
            margin:0 auto;
        }
        .box .div1{
            width:200px;
            height:200px;
            background-color:orange;
            position:fixed;
            top:10px;
            z-index:4;
           
        }
        .box .div2{
            width:200px;
            height:200px;
            background-color:red;
            position:fixed;
            top:40px;
            z-index:3;
        }
        .box .div3{
            width:200px;
            height:200px;
            background-color:rgb(247, 243, 243);
            position:fixed;
            top:60px;
            z-index:2;
        }
        .box .div4{
            width:200px;
            height:200px;
            background-color:rgb(81, 11, 243);
            position:fixed;
            top:80px;
            z-index:1;
        }
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

总结：z-index,没有单位，并存在负值。默认情况下最后写的优先显示在最上层。设置后，数值越大，显示越靠上。

相关阅读:
JavaScript数据结构【数组】
04 _ 复杂度分析（下）：浅析最好、最坏、平均、均摊时间复杂度
 sqoop连接MYSQL报错处理
 〖全域运营实战白宝书 - 运营角色认知篇③〗- 运营的底层逻辑是什么？
基于 Next.js实现在线Excel
【FPGA项目】图像采集及显示（3）总结
 vue3回退页面不刷新解决
 抓包后使用postman访问出错，后端报错 MalformedJsonException: Unterminated string
算法——哈希表篇
 OpenCV级联分类器识别车辆实践笔记
原文地址：https://blog.csdn.net/qq_40924992/article/details/126169177