当前位置： 首页 > article >正文

CSS的定位（文档流，相对定位，绝对定位，固定定位）

article 2024/11/14 7:53:49

 网页文档流

概念

网页文档流（Document Flow）是指元素在页面中出现的先后顺序。它决定了网页的整体布局和排版方式，也是实现网页布局的基础。

文档流的特点：将一个页面从上到下分为一行一行的，其中块元素独占一行，而行内元素在每一行从左到右依次排列，直到铺满当前的行布局。

块元素的文档流

自上而下流水线摆放

<style>
        div{
            width: 50px;
            height: 50px;
            background-color: darkgrey;
            border: 2px red solid;
        } 
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

在这里使用了块级元素作为一个代码演示，我们可以看到 每个块级元素独占一行，从上到下。

 行内元素的文档流

从左到右流水线摆放

<style>
        b{
            background-color: darkgrey;
            border: 2px red solid;
        } 
    </style>
</head>
<body>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
    <b>行内元素代码演示</b>
</body>

 这里使用了行内元素进行了一个代码演示，我们可以看到行内元素在每一行从左到右依次排列，直到铺满当前的行布局。

  网页文档流的缺陷

从以上块级元素和行内元素的代码演示中我们可以看到关于文档流的缺陷：

1.元素排列及布局不灵活

2.元素之间间隙过小

3.空格折叠

缺陷1

<style>
        #img1{
            width: 50px;
            height: 50px;
            border: 2px red solid;
        }
    </style>
</head>
<body>
    <b>缺陷1</b>
    <img src="./第五图片.png" id="img1">
</body>

 元素排列及布局不灵活，元素高低不平，元素间底边对齐，当想要做出排列不一的网页效果时，就相对比较困难。

缺陷2 

<style>
        img{
            width: 50px;
            height: 50px;
            border: 2px red solid;
        }
    </style>
</head>
<body>
    <img src="./第五图片.png">
    <img src="./第五图片.png">
    <img src="./第五图片.png">
    <br>
    <img src="./第五图片.png">
    <img src="./第五图片.png">
    <img src="./第五图片.png">
</body>

 元素之间间隙过小，元素之间看起来十分拥挤，对于网页观感相对来说不舒适

 缺陷3

<b>空格演示</b>               <b>空格演示</b><br>
    <b>空格演示</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>空格演示</b>

第一行代码中间 隔了几个空格，但是在代码演示中却只有一个空格的间隔，这就是文档流的空格折叠。

第二行代码中，用了标签&nbsp；代码演示中 文本与文本之间的间隔变大了，这就说明在文本流中我们可以使用&nbsp；标签来进行一个空格的实现

 如何克服文档流的缺陷？脱离文档流！

 相对定位（relative）

  概念

使用相对定位的盒子会相对于原本的位置，通过偏移到指定的距离，到达新的位置；盒子本体仍处于文档流中。

CSS代码添加 position: relative;
水平方向：left、right
垂直方向：top、bottom

注：1.两个方向各选一个参数即可定位；
         2.定位的数值可以为负数。 

实验1：

<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: gainsboro;
            border: red 3px solid;
            padding: 10px;
            opacity: 0.3;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: gainsboro;
            border: red 3px solid;
            padding: 10px;
            position: relative;
            left: 30px;
            bottom: 30px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

id="div1" 的盒子是一个正常的文档流的盒子，而id="div2"的盒子使用了相对定位方式定位，因此相对于原本位置向下，向左移动了30px。

我们把id="div1" 的盒子看成是未进行相对定位的盒子，即"原本的位置"；而id="div2"盒子是移动后的盒子，这样我们可以清晰的看到，使用相对定位的盒子仍在文档流中

实验2：

以下是三个块元素的文档流排版：

这里是通过相对定位将第二个块元素进行了一个向右，向上偏移30px

<style>
        #div1{
            width: 100px;
            height: 100px;
           background-color: red;
            
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 30px;
            bottom: 30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">黄</div>
</body>

通过实验我们可以看到，使用相对定位对盒子进行的移动 ，对其他元素并没有影响。

相对定位练习

<style>
        img{
            width: 40px;
            height: 40px;
        }
        #img1{
            border:green 3px solid;
            
            
        }
        #img2{
            border: blue 3px solid;
            position: relative;
            left: 20px;
            top: 20px;
        }
        #img3{
            border: red 3px solid;
        }
        div{
            width: 40px;
            height: 40px;
            border: yellow 3px solid;
        }
       
    </style>
</head>
<body>
    <img src="./第五图片.png" id="img1">
    <img src="./第五图片.png" id="img2">
    <img src="./第五图片.png" id="img3">
    <br>
    <img src="./第五图片.png">
    <img src="./第五图片.png">
    <img src="./第五图片.png">
    <div></div>
    <div></div>
    <div></div>
</body>

 

 绝对定位（absolute）

绝对定位是相对于最近的已定位父元素或根元素进行定位，它会脱离正常文档流，并且不占据原来的位置，通过指定上、下、左、右属性来定位元素。

CSS代码添加 position: absolute;
水平方向：left、right
垂直方向：top、bottom
注：1.两个方向各选一个参数即可定位；
         2.定位的数值可以为负数；
         3.每个设置了绝对定位的盒子，都会有专属的浮层，有几个绝对定位的盒子，就有几个浮层。

 实验1

绝对定位前的效果（未脱离文档流）： 

对第一个盒子进行绝对定位向下偏移了20px，向右偏移了30px后（这里更改了盒子大小以便更好观察到浮层盒子的活动）：

 

<style>
    #div1{
        width: 70px;
        height: 70px;
        background-color: red;
        position: absolute;
        left: 30px;
        top: 20px;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: blue;
       }
</style>

    
</head>
<body>
      <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
</body>

根据绝对定位后效果看，我们可以得知，绝对定位的盒子从正常文档流中脱离，但对其他的兄弟盒子的定位并无影响，就好像这个盒子并不存在，继而向上填补掉那个空出的位置（浮层）。

就和排队一样，这里相当于3个人在排队，第一个人由于绝对定位的位置变动，而空出来的位置则被下一个人填补上。

 实验2

接下来我们对第二个盒子进行同样位置的绝对定位

<style>
    #div1{
        width: 70px;
        height: 70px;
        background-color: red;
        position: absolute;
        left: 30px;
        top: 20px;
    }
    #div2{
        width: 70px;
        height: 70px;
        background-color: green;
        position: absolute;
        left: 30px;
        top: 20px;
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: blue;
       }
</style>

    
</head>
<body>
      <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
</body>

 在这里我们发现第一个红色的盒子消失了,那是因为绝对定位具有覆盖性；当第二个盒子进行了绝对定位后，第三个盒子就向上补空位；而第二个盒子由于设置了和第一个盒子一样的偏移位置且盒子大小一样，所以第二个盒子定位后的位置和第一个盒子一样，所以第一个盒子被第二个盒子覆盖掉了。

 实验3

如果第二个盒子的大小小于第一个盒子那么第二个盒子还会被覆盖吗？

#div2{
        width: 50px;
        height: 50px;
        background-color: green;
        position: absolute;
        left: 35px;
        top: 25px;
    }

答案是 ：不会。也就是说如果第二个盒子尺寸大于第一个盒子时，第一个盒子才会出现覆盖的情况；如果是小于的话，那么就不会出现覆盖的情况。 

绝对定位练习

用绝对定位来做出以下图片的效果吧

<style>
        article{
            width: 600px;
            height: 600px;
            background-color: rgb(117, 117, 117);
            position: absolute;
            left: 100px;
            top: 100px;}
        #div1{
            width: 70px;
            height: 70px;
            background-color: blue;
            position: absolute;
            left: 300px;
            top: 250px;}
        #div5{
            width: 40px;
            height: 40px;
            background-color: yellow;
            position: absolute;
            left: 312px;
            top: 262px;}
        #div2{
            width: 60px;
            height: 60px;
            background-color: rgb(255, 255, 255);
            position: absolute;
            left: 500px;
            top: 150px;}
        #div3{
            width: 60px;
            height: 60px;
            background-color: rgb(255, 255, 255);
            position: absolute;
            left: 100px;
            top: 150px;}
        #div4{
            width: 400px;
            height: 40px;
            background-color: rgb(255, 255, 255);
            position: absolute;
            left: 100px;
            top: 400px;}
        
    </style>
    
</head>
<body>
    <article>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
    </article>

</body>

固定定位（fixed）

固定定位是绝对定位的子类别，一个设置固定定位的元素是相对于视窗固定的，就算页面文档发生了滚动，它也会一直待在相同的地方。

固定定位代码添加：position : fixed

水平方向：left  right

垂直方向：top  bottom

注：1. 两个方向各选一个参数即可定位；

        2. 定位的数值可以为负数

        3. 每个设置了固定定位的盒子，都会有专属的浮层，有几个固定定位的盒子，就有几个浮层。

 实验1

没有进行盒子固定定位前的盒子排列（未脱离文档流）

为了对固定定位演示更加清晰，将盒子3进行固定定位（脱离文档流）

<style>
        
    div{
        /* 给所有div盒子进行宽和高的定值 */
        width: 200px;
        height: 200px;
        background-color: gray;
        margin-bottom: 5px;
    }
    #div3{
        /* 背景色为红色 */
        background-color: red;
        /* 下外边距5px */
        margin-bottom: 5px;
        /* 进行固定定位 */
        position: fixed;
        /* 向左偏移至距离浏览器窗口顶端208px */
        left: 208px;
        /* 垂直向上偏移至距离浏览器窗口顶端70px */
        top: 70px;
    }
</style>
<body>
    <div>1</div>
    <div>2</div>
    <div id="div3">3</div>
    <div>4</div>
</body>

 调整页面高度，滚动进度条后，盒子3的位置

 我们通过盒子的固定定位示例可以看到，当我们对盒子进行固定定位，原本的盒子就会根据我们对其设置的位置进行偏移。例如示例中的盒子3，当盒子3移动到了其所固定的位置时，原本属于盒子3的位置则空了出来（浮层），紧随其后的盒子就往上填补掉空出的位置（浮层）。而被固定定位的盒子3的位置不会进行改变，就算页面文档发生了滚动，它也会一直固定在相同的地方。

固定定位练习

通过用固定定位，来做一个和下图一样效果的盒子吧！

这是一个未进行固定定位的网页

<body>  
  
    <header>  
        <h1 align="center">第五人格</h1>  
        <p align="center">欢迎来到: <ins>第五人格</ins></p>  
        <hr> 
        <nav>  
            <ul type="none">  
                <li><a href="#">战绩</a></li>  
                <li><a href="#">排位</a></li>  
                <li><a href="#">匹配</a></li>  
                <li><a href="#">归宿</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>  
    <main>  
        <section>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="../CSS常用属性/第五图片.png" alt="文章配图" width="200" height="200">  
                <p>想了解第五人格：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

    
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>角色</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>求生者</td>  
                        <td><a href="角色A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>监管者</td>  
                        <td><a href="角色B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  

            <div style="clear: both;"></div>
        </section>  
    
        <section id="contact">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr>  
    <footer>  
        <p>版权所有 &copy; 2024 第五人格官方</p>  
    </footer>  
  
</body>

 用固定定位设置一个浮动的盒子

nav ul{
            height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
            background-color: aquamarine;
        }
        nav ul li{
            /* 右外边距设置 */
            margin-right: 20px;
             /* 导航栏内容左浮动 */
            float:left;
        }
        #contact{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            /* 用固定定位制作一个浮动的小盒子 */
            position: fixed;
            /* 向左偏移至距离浏览器窗口顶端1100px */
            left:1100px;
            /* 垂直向上偏移至距离浏览器窗口顶端500px */
            top:500px;
        }

 


http://www.kler.cn/a/390472.html

相关文章：

  • Openstack7--安装消息队列服务RabbitMQ
  • 在 Ubuntu 上安装 `.deb` 软件包有几种方法
  • 使用CubeMX一键配置Freertos
  • 【AI技术对电商的影响】
  • 券商隔夜单自动下单交易接口
  • RAG综述：《A Comprehensive Survey of Retrieval-Augmented Generation (RAG)》
  • Tomcat(4) Tomcat支持哪些版本的Java？
  • PCB板材和适用场合
  • 常见的排序算法及分类对比
  • ReactPress：构建高效、灵活、可扩展的开源发布平台
  • 模块化沙箱：深信达如何为数据安全提供全方位保护
  • 数据库SQL——嵌套子查询（IN/NOT IN/SOME/ALL/EXIST/NOT EXIST）
  • 见人就说“数字化转型”，但你真的理解“转型”转的到底是什么吗
  • 黑盒测试方法论—边界值
  • 网络编程示例之socket编程
  • 第十三天 概率论与统计学
  • shodan 【2】（泷羽sec）
  • iOS 18.2 重磅更新：6个大动作
  • uni-app之数据驱动的picker选择器（ uni-data-picker）之可以选择到任意级别
  • Timer指定时间定时任务运行
  • ONLYOFFICE 8.2 版：助力自动化办公的佼佼者
  • 2024年11月7日Github流行趋势
  • sql server启用远程连接与修改默认端口
  • 【FastAdmin】在页面中使用layui，以此引申使用颜色选择器示例
  • WMS仓储管理系统三个重要的使用价值
  • 内网环境，基于k8s docer 自动发包