HTML如何理解定位position？分别有几种定位？

最新推荐文章于 2024-02-14 11:51:22 发布

京拾

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量3k

点赞数 8

文章标签： css css3 前端 html

本文链接：https://blog.csdn.net/qq_48109675/article/details/126604131

版权

一、定位类型有哪些？

静态定位（默认）、相对定位、绝对定位、固定定位、粘滞定位

第一种：静态定位-static

特点：是浏览器默认上至下、左至右排序

第二种：相对定位

语法：position：relative

特点：

相对与自身在浏览器中的原来位置移动
不脱离文档流，会继续在标准流中占用一份空间
同一方向上的定位属性只能使用一个，right/left+top/bottom
常用于父级相对定位、子级绝对定位

例子：执行前蓝色相对定位后：

蓝色div代码块：
    .div2 {
      background-color: powderblue;
      /* 相对定位 
      特点：相对于子自身再浏览器中的默认位置(原来位置)
      不脱离文档流
      */
      position: relative;
      top: 40px;
      left: 40px;
    }

第二种：绝对定位

语法：position：absolute

特点：

脱离标准流

不区分块级、行内、行内块级元素

同一方向上的定位属性只能使用一个，right/left+top/bottom

忽略祖先元素的padding

参考点：若绝对定位的元素有祖先元素也是定位流（绝对定位、固定定位、相对定位）, 那么这个绝对定位的元素就会以该元素作为参考点，若有多个参考点，则就近原则。否则，都以body为参考点

例子：蓝色包含黑色蓝色div：相对定位黑色div：绝对定位

执行前：执行后：
    /* 父级 */
    .div2 {
      position: relative;
      /* position: absolute; */
      background-color: powderblue;
    }
    /* 子级 */
    .div4 {
      width: 50px;
      height: 50px;
      background-color: rgb(96, 100, 99);
      /* 设置绝对定位
      特性：
      1、脱离文档流 原位置不保留 下面的东西会顶上来(它会覆盖下面的元素)
      2、默认使用了绝对定位的元素 无论有无父元素 参数点是body
      3、若祖先元素（父元素-爷爷元素-直系元素-body元素）设置了相对定位，则参照点为最近的祖先元素
      */
      position: absolute;
      top: 40px;
      left: 30px;

    }

第三种：固定定位

语法：

特点：position：flex

让固定盒子不随着滚动条的滚动而滚动

脱离文档流、不会占用标准流中的空间

不区分行内、块级、行内块级

同一方向上的定位属性只能使用一个，right/left+top/bottom

例子：一共50个div 不论怎么滑动 flex元素始终不动

执行前：执行后：
    .divBot {
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
      /* 设置固定 */
      top: 100px;
      left: 300px;
      position: fixed;

    }

第四种：粘滞定位（开始相对定位、到达设定的值为固定定位）

语法：position：sticky

特点：

不脱离文档流，保留元素原本位置
结合了relative和fixed两种定位功能于一体的特殊定位（跨越特定值，之后为固定定位）

使用条件：

执行前：执行后：

（图片比较难看出来，这给全部的代码）

<!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>网易-导航栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      /* 清除列表标志项 */
      list-style: none;
    }

    .container {
      width: 726px;
      height: 8888px;
      background-color: antiquewhite;
      /* 水平居中 */
      margin: 0 auto;

    }

    /* 设置一级菜单 */
    .container ul li {
      background-color: #eee;
      width: 120px;
      /* height: 50px; */
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      /* 变成一行 */
      float: left;
      /* 右侧边框 */
      border-right: 1px solid red;
    }

    /* 设置a标签的颜色 */

    .container ul li a {
      color: rgb(74, 73, 73);
      text-decoration: none;
    }

    /* 伪类选择器 悬浮 */
    .container ul li:hover {
      background-color: rgb(175, 173, 173);
    }

    /* 设置二级菜单隐藏 */
    .container ul li ul {
      /* 因为它不占据位置 */
      display: none;
    }

    /* 设置二级菜单的显示——滑过一级菜单时 设置显示二级菜单 */
    .container ul li:hover ul {
      display: block;
    }

    /* 设置导航栏粘滞定位 */
    .container ul {
      position: sticky;
      /* 粘滞定位
      特性：relative+fixed定位一个定位属性
      默认相对定位达到阈值就是固定定位
      */
      top: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 占位div -->
    <div style="height: 300px;"></div>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">亲自旅游</a></li>

      <li>
        <a href="#">居家生活</a>
        <!-- 二级菜单栏 -->
        <ul>
          <li>样式1</li>
          <li>样式2</li>
          <li>样式3</li>
        </ul>

      </li>
      <li>
        <a href="#">宠物生活</a>
        <!-- 二级菜单栏 -->
        <ul>
          <li>样式1</li>
          <li>样式2</li>
          <li>样式3</li>
        </ul>
      </li>
      <li><a href="#">美食酒水</a></li>
      <li><a href="#">个护清洁</a></li>
    </ul>
  </div>

</body>

</html>

京拾

关注

8
点赞
踩
48

收藏

觉得还不错? 一键收藏
1
评论
HTML如何理解定位position？分别有几种定位？

语法：position：absolute特点：脱离标准流不区分块级、行内、行内块级元素同一方向上的定位属性只能使用一个，right/left+top/bottom 忽略祖先元素的padding参考点：若绝对定位的元素有祖先元素也是定位流（绝对定位、固定定位、相对定位）, 那么这个绝对定位的元素就会以该元素作为参考点，若有多个参考点，则就近原则。否则，都以body为参考点 ...
复制链接

扫一扫