• 元素定位（绝对、相对、粘滞、固定）

    目录

    一、定位

    1、效果

    2、特点

    3、开启方式

    二、相对定位（relative）

    1、特点

    2、定位原理

    三、绝对定位（absolute）

    1、特点

    2、定位标准

    3、包含块（containing block）

    四、粘滞定位（sticky）

    1、特点

    2、定位标准

    3、例子

    五、固定定位（fixed）

    1、特点

    2、定位标准

    3、例子

    六、代码

    1、相对定位

    2、绝对定位

    3、粘滞定位

    4、固定定位

    一、定位

    1、效果

    在盒子模型中，可以用定位的手段达到修改边界的效果，更准确来说，可以达到在父子类元素、浏览器中随意定位的效果

    2、特点

    不同于修改边界、浮动，定位手段仅仅影响当前元素，而不会排挤其它元素

    3、开启方式

    （1）在元素中打开position，默认值为static，没有定位效果，而其他值才有定位效果

    （2）坐标修改值有top、right、bottom、left，通常对位元素只用其一，例如left和right，因为二维坐标轴只需要两个坐标就够了

    二、相对定位（relative）

    1、特点

    （1）开启后不设置偏移量所有元素不会发生改变

    （2）不会超出文档流

    （3）不会影响元素性质（块元素、行内元素仍保持属性）

    （4）层级会升高（会覆盖以前的元素）

    2、定位原理

    （1）概念

    -相对元素（需要移动的元素）

    -参照物（理解中的坐标原点）

    （2）定位标准

    -相对原文档流中原本的坐标进行移动（通常默认为原定元素的左上角）

    （3）例子

    在本例中，橙色元素本来是块元素，它本来在黄色元素下方，在相对定位中，它的坐标原点就是黄色元素的左下角 

    三、绝对定位（absolute）

    1、特点

    （1）超脱文档流

    （2）如果不设置偏移量，则不设置偏移量的“元素位置”不会发生改变（意思就是，在绝对定位中，位置是不会变化的，但其它元素会受影响，上面是原因）

    （3）层级提升

    （4）元素性质会被改变（因为超脱了文本流）

    2、定位标准

    绝对定位元素是根据其“包含块”进行定位的

    3、包含块（containing block）

    （1）常规情况

    -离当前元素最近的祖先块元素

    （2）绝对定位情况

    -离当前绝对定位元素最近的开启定位的祖先元素

    -如果最近的都没有开启定位，则以根元素作为定位标准

    （3）根元素（html，初始包含块）

    四、粘滞定位（sticky）

    1、特点

    有元素到达某个位置时固定的独特特点

    2、定位标准

    粘滞定位特点和相对定位基本一致

    3、例子

    这里的例子不太好看出效果，最好是自己跑代码体会一下效果 

    五、固定定位（fixed）

    1、特点

    （1）唯一不同的是，固定定位永远参照于浏览器的视口定位

    （2）固定定位元素不会跟随网页滚动条滚动，多用于弹窗广告

    （3）但因为版本兼容性问题，不常用

    2、定位标准

    是一种特殊的绝对定位，定位标准与绝对定位差不多

    3、例子

    这里效果不太好通过截图展示，请运行代码体会

    六、代码

    1、相对定位

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>定位-相对定位title>
    8.     
    9.     <style>
    10.       .box1 {
    11.         width: 100px;
    12.         height: 100px;
    13.         background-color: #bfa;
    14.       }
    15.       .box2 {
    16.         width: 100px;
    17.         height: 100px;
    18.         background-color: red;
    19.         position: relative;
    20.         top: -100px;
    21.         left: 100px;
    22.       }
    23.       .box3 {
    24.         width: 100px;
    25.         height: 100px;
    26.         background-color: yellow;
    27.       }
    28.       .box4 {
    29.         width: 100px;
    30.         height: 100px;
    31.         background-color: orange;
    32.         position: relative;
    33.         top: -100px;
    34.         left: 50px;
    35.       }
    36.     style>
    37.   head>
    38.   <body>
    39.     <div class="box1">div>
    40.     <div class="box2">div>
    41.     <div class="box3">div>
    42.     <div class="box4">div>
    43.   body>
    44. html>

    2、绝对定位

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>定位-绝对定位title>
    8.     
    9.     <style>
    10.       .box1 {
    11.         margin-top: 100px;
    12.         width: 300px;
    13.         height: 300px;
    14.         background-color: #bfa;
    15.         /* position: relative; */
    16.       }
    17.       .box2 {
    18.         width: 200px;
    19.         height: 200px;
    20.         background-color: red;
    21.         /* position: relative; */
    22.       }
    23.       .box3 {
    24.         width: 100px;
    25.         height: 100px;
    26.         background-color: yellow;
    27.         position: absolute;
    28.         top: 100px;
    29.         left: 100px;
    30.       }
    31.       .box4 {
    32.         width: 100px;
    33.         height: 100px;
    34.         background-color: orange;
    35.       }
    36.     style>
    37.   head>
    38.   <body>
    39.     <div class="box1">
    40.       <div class="box2">
    41.         <div class="box3">div>
    42.       div>
    43.     div>
    44.     <div class="box4">div>
    45.   body>
    46. html>

    3、粘滞定位

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>定位-粘滞定位title>
    8.     
    9.     <style>
    10.       * {
    11.         padding: 0px;
    12.         margin: 0px;
    13.       }
    14.       body {
    15.         height: 2000px;
    16.       }
    17.       .box1 {
    18.         height: 400px;
    19.         width: 400px;
    20.         background-color: #bfa;
    21.       }
    22.       ul li {
    23.         list-style: none;
    24.         float: left;
    25.       }
    26.       ul {
    27.         width: 492px;
    28.         height: 48px;
    29.         background-color: #ffe;
    30.         margin: 40px auto;
    31.         position: sticky;
    32.         top: 10px;
    33.       }
    34.       li a {
    35.         color: #999;
    36.         line-height: 48px;
    37.         display: block;
    38.         text-decoration: none;
    39.         padding: 0px 10px;
    40.       }
    41.       li a:hover {
    42.         background-color: #444;
    43.         color: #eee;
    44.       }
    45.     style>
    46.   head>
    47.   <body>
    48.     <div class="box1">div>
    49.     <ul>
    50.       <li>
    51.         <a href="https://www.w3school.com.cn/h.asp">HTML/CSSa>
    52.       li>
    53.       <li>
    54.         <a href="https://www.w3school.com.cn/b.asp">Brower Sidea>
    55.       li>
    56.       <li>
    57.         <a href="https://www.w3school.com.cn/s.asp">Sever Sidea>
    58.       li>
    59.       <li>
    60.         <a href="https://www.w3school.com.cn/p.asp">Programminga>
    61.       li>
    62.       <li>
    63.         <a href="https://www.w3school.com.cn/x.asp">XMLa>
    64.       li>
    65.     ul>
    66.   body>
    67. html>

    4、固定定位

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>定位-固定定位title>
    8.     
    9.     <style>
    10.       body {
    11.         height: 2000px;
    12.       }
    13.       .box1 {
    14.         width: 100px;
    15.         height: 100px;
    16.         background-color: #bfa;
    17.         position: fixed;
    18.         right: 0px;
    19.       }
    20.       .box2 {
    21.         width: 100px;
    22.         height: 100px;
    23.         background-color: red;
    24.       }
    25.       .box3 {
    26.         width: 100px;
    27.         height: 100px;
    28.         background-color: yellow;
    29.       }
    30.       .box4 {
    31.         width: 100px;
    32.         height: 100px;
    33.         background-color: orange;
    34.       }
    35.     style>
    36.   head>
    37.   <body>
    38.     <div class="box1">div>
    39.     <div class="box2">div>
    40.     <div class="box3">div>
    41.     <div class="box4">div>
    42.   body>
    43. html>

  • 相关阅读:
    【链接装载与库】 Linux共享库的组织
    Opengl Fence 内部实现
    【算法训练营】 - ①① 暴力递归
    即时通讯开发如何撸一个WebSocket服务器
    Java毕设项目——校园出入管理系统(java+SSM+Maven+Mysql+Jsp)
    【rust/egui】(十一)使用rfd选择文件并使用serde_json进行序列化
    基于遗传算法的微电网调度(风、光、蓄电池、微型燃气轮机）（Matlab代码实现）
    永磁同步电机恒压频比（V/F）开环控制系统Matlab/Simulink仿真分析及代码生成到工程实现
    TensorFlow实战教程（三十二）-Transformer的商品评论情感分析 机器学习和深度学习的Baseline模型实现
    04、SpringBoot + 微信支付 --- 内网穿透ngrok（安装、使用）
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126165972