• 属性position:

    1. static 默认值，静态定位
    2. relative 相对定位
    3. absolute 绝对定位
    4. fixed 固定定位
    5. sticky 粘性定位

      一、相对定位

  • 属性position:relative;

  • 参考物：元素本身
  • 是否脱离文档流：不脱离
  • 偏移距离:(向着中心点方向移动为正值)
    • top:100px 顶部向下移动
    • bottom:100px 底部向上移动
    • left:100px 左侧向右移动
    • right:100px 右侧向左移动
  • 应用场景：
    • 元素位置微调，初始位置空间还在
    • 配合绝对定位使用
  • 经典案例：鼠标移入元素向上进行移动

2021-11-06_175842.jpg

二、绝对定位

  • 属性position:absolute;
  • 参考物：外层具有position属性的元素,一层层向上查找，如果没有找到最终参考浏览器空白文档区域定位
  • 是否脱离文档流：脱离
  • 偏移距离:(向着中心点方向移动为正值)
    • top 参考物的顶部距离元素的顶部
    • bottom 参考物的底部距离元素的底部
    • left 参考物的左侧距离元素的左侧
    • right 参考物的右侧距离元素的右侧
  • 应用场景：元素叠加效果，关闭按钮、二级菜单、轮播指示器
  • 案例：

案例1-关闭按钮.jpg案例2-下拉菜单.png案例4-轮播指示器.jpg

三、固定定位

  • 属性position:fixed;
  • 参考物：浏览器空白文档区域
  • 是否脱离文档流：脱离
  • 偏移距离:(向着中心点方向移动为正值)
    • top 文档区域的顶部距离元素的顶部
    • bottom 文档区域的底部距离元素的底部
    • left 文档区域的左侧距离元素的左侧
    • right 文档区域的右侧距离元素的右侧
  • 应用场景：固定在浏览器某一位置，不随滚动条滚动
  • 案例：返回顶部的空连接
    • <a href="#">返回顶部</a>
    • 行内元素脱离文档流(绝对定位、固定定位、浮动)后就可以设置尺寸了

2021-11-06_180158.jpg

四、粘性定位

  • 属性position:sticky;
  • 参考物：浏览器空白文档区域顶部
  • 是否脱离文档流：不脱离
  • 偏移距离
    • top 文档区域的顶部距离元素的顶部
  • 应用场景：吸顶效果

五、元素堆叠顺序

  • z-index改变元素的层叠顺序,可以取负值,数值越大越靠前,只有数值没有单位

案例5-定位层级关系.jpg

六、元素居中办法 - 面试题

  • 方法一：父元素尺寸未知,子元素尺寸已知，该方法同样适用于子元素比父元素尺寸大的情况

    1. 父元素{
    2. width: 600px;
    3. height: 600px;
    4. border: 1px solid #000;
    5. position: relative;
    6. }
    7. 子元素{
    8. width: 200px;
    9. height: 100px;
    10. background: yellow;
    11. position: absolute;
    12. /*向下移动父元素高度的一半*/
    13. top: 50%;
    14. /*向右移动父元素宽度的一半*/
    15. left: 50%;
    16. /*子元素向上移动高度的一半*/
    17. margin-top: -50px;
    18. /*子元素向左移动宽度的一半*/
    19. margin-left: -100px;
    20. }

  • 方法二：父元素、子元素尺寸均未知，只适用于子元素比父元素尺寸小的情况

    1. 父元素{
    2. width: 600px;
    3. height: 600px;
    4. border: 1px solid #000;
    5. position: relative;
    6. }
    7. 子元素{
    8. width: 200px;
    9. height: 100px;
    10. background: yellow;
    11. position: absolute;
    12. margin:auto;
    13. top: 0;
    14. bottom: 0;
    15. left: 0;
    16. right: 0
    17. }

七、定位、清除浮动综合案例

  • 说明万能清除浮动法的优势

2021-11-06_175223.jpg

八、定位设置元素尺寸

  • 子元素未设置宽高，指定子元素距离父元素四条边的距离即可
    1. <!DOCTYPE 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>Document</title>
    8.   <style>
    9.       * {
    10.           margin: 0;
    11.           padding: 0;
    12.       }
    13.       .father {
    14.           width: 800px;
    15.           height: 600px;
    16.           border: 1px solid #000;
    17.           position: relative;
    18.       }
    19.       .son {
    20.           position: absolute;
    21.           top: 100px;
    22.           bottom: 100px;
    23.           left: 50px;
    24.           right: 50px;
    25.           background: yellow;
    26.       }
    27.   </style>
    28. </head>
    29. <body>
    30.   <div class="father">
    31.       <div class="son"></div>
    32.   </div>
    33. </body>
    34. </html>

九、面试题 - 一侧固定一侧自适应布局方案(未完待续)

  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>Document</title>
 <style>
     * {
         margin: 0;
         padding: 0;
     }
     .left {
         width: 200px;
         height: 500px;
         background-color: red;
         position: fixed;
         top: 0;
         left: 0;
     }
     .auto {
         position: fixed;
         left: 200px;
         right: 0;
         top: 0;
         bottom: 0;
         background-color: yellow;
     }
 </style>
</head>
<body>
 <div class="left"></div>
 <div class="auto"></div>
</body>
</html>

  2. 方法二：浮动方法

    • 重点要添加 html,body { height: 100%; }
      <!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>Document</title>
<style>
   * {
       margin: 0;
       padding: 0;
   }
   /*不加这段代码，body的高度为0*/
   html,body {
       height: 100%;
   }
   .left {
       width: 200px;
       height: 500px;
       background-color: red;
       float: left;
   }
   .auto {
       height: 100%;
       background: yellow;
       margin-left: 200px;
   }
</style>
</head>
<body>
<div class="left"></div>
<div class="auto"></div>
</body>
</html>

  3. 方法三：BFC

  4. 方法四：calc()函数方法
  5. 方法四：弹性盒

十、知识点补充

  • 鼠标移入属性 cursor:pointer小手;
  • 如果无法设置尺寸的那一类元素(s,span),一旦设置了脱离文档流的属性(浮动、绝对定位、固定定位)，那么就可以设置宽高了