CSS3【定位的基本使用[静态定位\相对定位\绝对定位]、子绝父相、固定定位、元素的层级关系】

news2024/12/23 20:00:38

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 一、定位
    • 1.1定位的基本介绍
      • 1.1.1 网页常见布局方式
      • 1.1.2 定位的常见应用场景
    • 1.2 定位的基本使用
      • 1.2.1 定位初体验
      • 1.2.2 使用定位的步骤
      • 1.2.3 静态定位
      • 1.2.4 小结
      • 1.2.5 相对定位
      • 1.2.6 小结
      • 1.2.7 绝对定位
      • 1.2.8 绝对定位到底相对于谁进行偏移
      • 1.2.9 小结
    • 1.3 子绝父相
      • 1.3.1 子绝父相介绍
      • 1.3.2 小结
      • 1.3.3(拓展) 子绝父绝特殊场景
      • 1.3.4(案例)卡片模块的hot图标定位案例
      • 1.3.5(案例)子绝父相水平居中案例
      • 1.3.6(案例)子绝父相水平居中案例-解决方法
      • 1.3.7 小结
      • 1.3.8 (案例)子绝父相水平垂直都居中案例
      • 1.3.9(案例)子绝父相水平垂直都居中案例-解决方法
      • 1.3.10 小结
      • 1.3.11(案例)导航二维码居中定位案例
      • 1.3.12(案例)底部半透明遮罩效果
    • 1.4 固定定位、元素的层级关系
      • 1.4.1 固定定位
      • 1.4.2 小结
      • 1.4.3 能够说出 定位 的常见应用场景,并且能够说出 不同定位方式 的特点
      • 1.4.4 元素层级问题
      • 1.4.5 更改定位元素的层级
      • 1.4.6 小结


一、定位

学习路径:

    1. 定位的基本介绍
    1. 定位的基本使用
    1. 静态定位
    1. 相对定位
    1. 绝对定位
    1. 子绝父相
    1. 固定定位
    1. 元素的层级关系

1.1定位的基本介绍

1.1.1 网页常见布局方式

    1. 标准流
      1. 块级元素独占一行 → 垂直布局
      1. 行内元素/行内块元素一行显示多个 → 水平布局
    1. 浮动
      1. 可以让原本垂直布局的 块级元素变成水平布局
    1. 定位
      1. 可以让元素自由的摆放在网页的任意位置
      1. 一般用于 盒子之间的层叠情况

1.1.2 定位的常见应用场景

    1. 可以解决盒子与盒子之间的层叠问题
    • • 定位之后的元素层级最高,可以层叠在其他盒子上面在这里插入图片描述
    1. 可以让盒子始终固定在屏幕中的某个位置在这里插入图片描述

1.2 定位的基本使用

1.2.1 定位初体验

    1. 需求:页面中两个盒子,要求完成图片的效果,可以如何完成?
    • ➢ 针对于盒子与盒子之间的层叠问题,推荐使用定位完成!在这里插入图片描述

1.2.2 使用定位的步骤

    1. 设置定位方式
    • ➢ 属性名:position
    • ➢ 常见属性值:在这里插入图片描述
    1. 设置偏移值
    • ➢ 偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
    • ➢ 选取的原则一般是就近原则 (离哪边近用哪个)在这里插入图片描述

1.2.3 静态定位

  • ➢ 介绍:静态定位是默认值,就是之前认识的标准流。

  • ➢ 代码:在这里插入图片描述

  • ➢ 注意点:

      1. 静态定位就是之前标准流,不能通过方位属性进行移动
      1. 之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定

1.2.4 小结

  • ➢ 静态定位能通过方位属性进行移动吗?
    • • 不能,静态定位的元素就是默认标准流的情况

1.2.5 相对定位

1. 占有原来的位置
2. 仍然具体标签原有的显示模式特点
3. 改变位置参照自己原来的位置
4. 如果left和right都有, 以left为准; top和bottom都有以top 为准

  • ➢ 介绍:自恋型定位,相对于自己之前的位置进行移动

  • ➢ 代码:在这里插入图片描述

  • ➢ 特点:

      1. 需要配合方位属性实现移动
      1. 相对于自己原来位置进行移动
      1. 在页面中占位置 → 没有脱标
  • ➢ 应用场景:

      1. 配合绝对定位组CP(子绝父相)
      1. 用于小范围的移动在这里插入图片描述

1.2.6 小结

  • ➢ 相对定位position的属性值是什么?
    • • relative
  • ➢ 相对定位是否需要配合方位属性实现移动?
    • • 需要配合方位属性实现移动
  • ➢ 相对定位的元素相对于谁进行移动?
    • • 相对于自己原来位置进行移动
  • ➢ 相对定位的元素在网页中是否占位置?
    • • 在页面中占位置 → 没有脱标

1.2.7 绝对定位

绝对定位:
1.先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
2.有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
3.脱标, 不占位
4.改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)

  • ➢ 介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动

  • ➢ 代码:在这里插入图片描述

  • ➢ 特点:

      1. 需要配合方位属性实现移动
      1. 默认相对于浏览器可视区域进行移动
      1. 在页面中不占位置 → 已经脱标
  • ➢ 应用场景:

      1. 配合绝对定位组CP(子绝父相)在这里插入图片描述

1.2.8 绝对定位到底相对于谁进行偏移

  • ➢ 绝对定位相对于谁移动?
      1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
      1. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
        在这里插入图片描述
 <style>
        .box {
            /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动: 自己宽度的一半 */
            /* margin-left: -150px; */

            top: 50%;
            /* margin-top: -150px; */

            /* 位移: 自己宽度高度的一半 */
            transform: translate(-50%, -50%);

            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    
    <div class="box"></div>
</body>

1.2.9 小结

  • ➢ 绝对定位position的属性值是什么?
    • • absolute
  • ➢ 绝对定位是否需要配合方位属性实现移动?
    • • 需要配合方位属性实现移动
  • ➢ 绝对定位的元素相对于谁进行移动?
      1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
      1. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
  • ➢ 绝对定位的元素在网页中是否占位置?
    • • 在页面中不占位置 → 已经脱标

绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位

1.3 子绝父相

1.3.1 子绝父相介绍

  • ➢ 场景:让子元素相对于父元素进行自由移动
  • ➢ 含义:
    • • 子元素:绝对定位
    • • 父元素:相对定位
  • ➢ 子绝父相好处:
    • • 父元素是相对定位,则对网页布局影响最小

1.3.2 小结

  • ➢ 子绝父相的含义是什么?
    • • 子元素:绝对定位
    • • 父元素:相对定位
  • ➢ 子绝父相的应用场景是什么?
    • • 让子元素相对于父元素进行自由移动
  • ➢ 子绝父相的好处是什么?
    • • 父元素是相对定位,则对网页布局影响最小

1.3.3(拓展) 子绝父绝特殊场景

  • ➢ 场景:在使用子绝父相的时候,发现父元素已经有绝对定位了,此时直接子绝即可!
  • ➢ 原因:
    • • 父元素已经有定位已经满足要求,如果盲目修改父元素定位方式,可能会影响之前写好的布局

1.3.4(案例)卡片模块的hot图标定位案例

  • ➢ 需求:根据设计图,通过PxCook量取数据,在 day05-作业-卡片模块案例 基础上,定位hot图片完成一致的效果
    在这里插入图片描述

1.3.5(案例)子绝父相水平居中案例

  • ➢ 需求:使用子绝父相,让子盒子在父盒子中水平居中(父子元素任意宽度下都能实现)
    在这里插入图片描述

1.3.6(案例)子绝父相水平居中案例-解决方法

    1. 子绝父相
    1. 先让子盒子往右移动父盒子的一半
    • • left:50%
    1. 再让子盒子往左移动自己的一半
    • • 普通做法:margin-left:负的子盒子宽度的一半
      缺点:子盒子宽度变化后需要重新改代码
    • • 优化做法:transform:translateX(-50%)
      优点:表示沿着X轴负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不需要更改代码

1.3.7 小结

  • ➢ 使用子绝父相水平居中的操作是什么?
      1. 子绝父相
      1. left:50%;
      1. transform:translateX(-50%);

1.3.8 (案例)子绝父相水平垂直都居中案例

  • ➢ 需求:使用子绝父相,让子盒子在父盒子中水平垂直都居中(父子元素任意宽高下都能实现)在这里插入图片描述

1.3.9(案例)子绝父相水平垂直都居中案例-解决方法

    1. 子绝父相
    1. 让子盒子往右走大盒子一半
    • • left:50%
    1. 让子盒子往下走大盒子一半
    • • top:50%
    1. 让子盒子往左+往上走自己的一半
    • • transform:translate(-50%,-50%);

1.3.10 小结

  • ➢ 使用子绝父相水平垂直居中的操作是什么?
      1. 子绝父相
      1. left:50%;
      1. top:50%;
      1. transform:translate(-50%,-50%);

1.3.11(案例)导航二维码居中定位案例

  • ➢ 需求:根据设计图,在 day06-作业-微金所导航案例 基础上,定位二维码图片完成一致的效果在这里插入图片描述
<!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;
    }

    /* 因为有通栏:占满一行的边框,所以需要有一个通栏:占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部,所以设置ul为宽度固定并且水平居中的效果(后面项目中所用到的版心) */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素,宽高由内容撑开,并且无法设置宽高,此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素,此时可以设置宽高,会让a标签范围更大,用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    ul li .app {
      position: relative;
    }

    .code {
      position: absolute;
      left: 50%;
      top: 41px;
      transform: translate(-50%);
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转,所以证明img也是在a的范围内,因此把img写在a标签的内部 -->
      <li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

1.3.12(案例)底部半透明遮罩效果

  • ➢ 需求:根据设计图,通过代码在网页中完成一致的效果
  • ➢ 注意点:定位的元素会脱标(如:绝对定位),脱标后的元素宽高默认由内容撑开在这里插入图片描述
<!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>
        .banner {
            position: relative;
            margin: 0 auto;
            width: 1226px;
            height: 600px;
        }

        .mask {
            position: absolute;
            left: 0;
            bottom: 0;
            /* 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 */
            /* width: 1226px; */
            /* 如果子级和父级的宽度相同  */
            width: 100%;
            height: 150px;
            background-color: rgba(0,0,0, .5);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="./images/bg.jpg" alt="">
        <!-- 遮罩 -->
        <div class="mask">111</div>
    </div>
</body>
</html>

1.4 固定定位、元素的层级关系

1.4.1 固定定位

1. 脱标-不占位置
2. 改变位置参考浏览器窗口
3. 具备行内块特点

  • ➢ 介绍:死心眼型定位,相对于浏览器进行定位移动

  • ➢ 代码:在这里插入图片描述

  • ➢ 特点:

      1. 需要配合方位属性实现移动
      1. 相对于浏览器可视区域进行移动
      1. 在页面中不占位置 → 已经脱标
  • ➢ 应用场景:

      1. 让盒子固定在屏幕中的某个位置在这里插入图片描述

1.4.2 小结

  • ➢ 固定定位position的属性值是什么?
    • • fixed
  • ➢ 固定定位是否需要配合方位属性实现移动?
    • • 需要配合方位属性实现移动
  • ➢ 固定定位的元素相对于谁进行移动?
    • • 相对于浏览器可视区域进行移动
  • ➢ 固定定位的元素在网页中是否占位置?
    • • 在页面中不占位置 → 已经脱标

1.4.3 能够说出 定位 的常见应用场景,并且能够说出 不同定位方式 的特点

在这里插入图片描述

1.4.4 元素层级问题

  • ➢ 不同布局方式元素的层级关系:
    • • 标准流 < 浮动 < 定位
  • ➢ 不同定位之间的层级关系:
    • • 相对、绝对、固定默认层级相同
    • • 此时HTML中写在下面的元素层级更高,会覆盖上面的元素

1.4.5 更改定位元素的层级

默认情况下, 定位的盒子 后来者居上 ,
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
注意: z-index必须配合定位才生效

  • ➢ 场景:改变定位元素的层级
  • ➢ 属性名:z-index
  • ➢ 属性值:数字
    • • 数字越大,层级越高

1.4.6 小结

  • ➢ 标准流、浮动、定位元素之间的层级关系是什么样?
    • • 标准流 < 浮动 < 定位
  • ➢ 不同定位元素之间的层级关系是什么样?
    • • 相对、绝对、固定默认层级相同
    • • 此时HTML中写在下面的元素层级更高,会覆盖上面的元素
  • ➢ 通过什么属性可以修改定位元素的层级?
    • • z-index:数字;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/115166.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Docker Hub 完美地存储 Helm 图表实战

使用 Docker Hub 完美地存储 Helm 图表实战 Helm 是 Kubernetes 的包管理器。它是一个开源容器编排系统。它通过提供一种简单的方法来定义、安装和升级复杂的 Kubernetes 应用程序&#xff0c;帮助您管理 Kubernetes 应用程序。 使用 Helm&#xff0c;您可以将您的应用程序打包…

git教程

教程目录Git 教程Git 与 SVN 区别Git 与 SVN 区别点&#xff1a;Git 安装配置Linux 平台上安装Debian/UbuntuCentos/RedHatWindows 平台上安装Mac 平台上安装Git 配置用户信息文本编辑器##差异分析工具查看配置信息Git 工作流程Git 工作区、暂存区和版本库基本概念Git 创建仓库…

semargl 软件使用方法简介

文章目录前言一、semargl 软件使用简介1.semargl 软件简介2.准备演示软件操作所需的数据3.使用 semargl 获取频谱关系4.使用 semargl 获取特定频率模式的空间分布5.使用 semargl 获取自旋波的色散关系二、笔记05第三节内容的补充1.优化多进程读取磁化数据文件的代码2.新增获取特…

【JavaSE】 常用类(447~515)

String 447.常用类-每天一考 1.画图说明线程的生命周期&#xff0c;以及各状态切换使用到的方法等 状态&#xff0c;方法 2.同步代码块中涉及到同步监视器和共享数据&#xff0c;谈谈你对同步监视器和共享数据的理解&#xff0c;以及注意点。 synchronized(同步监视器){//操…

Python手势识别与追踪

程序示例精选 Python手势识别与追踪 如需安装运行环境或远程调试&#xff0c;见文章底部微信名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<Python手势识别与追踪>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 应…

【日常】圣诞节、颜色⛄

2022年圣诞节到来啦&#xff0c;很高兴这次我们又能一起度过~ 关于圣诞节&#x1f384;&#xff0c;大家想到什么颜色&#xff1f;⛄&#x1f98c;&#x1f381;&#x1f385;&#x1f525; demo online - https://codepen.io/adamlindqvist/pen/EaPeJg html <!-- Christ…

详细介绍关于自定义类型:结构体、枚举、联合【c语言】

文章目录结构体结构体的声名特殊的声明结构成员的类型结构的自引用结构体变量的定义和初始化结构体内存对齐修改默认对齐数结构体变量访问成员结构体传参结构体实现位段&#xff08;位段的填充&可移植性&#xff09;位段的内存分配位段的跨平台问题枚举枚举类型的定义枚举的…

【Linux】用户与用户组操作_补

文章目录一.用户1.1 用户与用户组概念1.2 与用户管理相关的系统文件1.3 查看用户组1.3.1用户组密码配置文件&#xff0f;etc&#xff0f;gshadow1.4用户管理创建用户修改用户添加密码一.用户 1.1 用户与用户组概念 用户和用户组的对应关系有&#xff1a;一对一、一对多、多对一…

【C语言进阶】指针练习题

写在前面 这是指有关指针的小题 正文 练习一 int main() {int a[5][5];int (*p)[4];pa;printf("%p,%d", &p[4][2]-&a[4][2], &p[4][2]-&a[4][2] );return 0; } 解析&#xff1a; a[4][2]为如图粉色部分&#xff0c;p[4][2]为如图蓝色部分。a的…

【ROS通信机制实战练习】通过话题发布实现turtlesim小乌龟圆周运动

本节记录下使用ROS中的话题机制&#xff0c;实现turtlesim中小乌龟的圆周运动。 如果想通过话题通信机制&#xff0c;实现小乌龟的圆周运动&#xff0c;需要首先明确小乌龟的运动情况&#xff0c;以及所涉及的指挥运动的参数&#xff0c;这里需要首先手动发布一个turtlesim的节…

springboot整合mybatis代码快速生成

特别说明&#xff1a;本次项目整合基于idea进行的&#xff0c;如果使用Eclipse可能操作会略有不同&#xff0c;不过总的来说不影响。 springboot整合之如何选择版本及项目搭建 springboot整合之版本号统一管理 springboot整合mybatis-plusdurid数据库连接池 springboot整合…

String 字符串

String 基本介绍 String 应该是 Java 中最常用的一个对象&#xff0c;他不是八种基本数据类型的其中之一&#xff0c;但是随便翻了一下项目代码&#xff0c;用 String 定义的变量超过百分之八十。 public final class Stringimplements java.io.Serializable, Comparable<…

VUE3-计算属性和监听器《五》

目录 一&#xff0c;计算属性 二&#xff0c;监听器 在vue3种&#xff0c;当界面上需要处理一些数据的时候&#xff0c;可以通过计算属性和监听器处理&#xff0c;他们都是对一个属性进行操作的&#xff0c;然后返回数据。 他们的区别是&#xff0c;计算属性&#xff0c;是通…

20221226英语学习

今日短文 When we are shown two options, our eyes tend to flick from one to the other and back again several times as we deliberate on the pros and cons of each. Researchers at Johns Hopkins University in the US have found that the speed with which our ey…

Hbase是什么?

Hadoop Database简介表结构数据只能读不能改>生成新版本总结简介 永远的百度百科 HBase是一个分布式的、面向列的开源数据库&#xff0c;一个结构化数据的分布式存储系统”。 HBase不同于一般的关系数据库&#xff0c;它是一个适合于非结构化数据存储的数据库。另一个不同的…

过年首秀 - 用python写一个自动生成春联的软件并打包exe

前言 哈喽啊&#xff0c;我亲爱的铁铁们&#xff0c;I am back &#xff01;&#xff01; 别管&#xff0c;我也是阳过的人了&#xff0c;这么久都没有更新&#xff0c;今天就带来个小玩意吧 这不是过完圣诞就要过年了吗 这不得准备准备&#xff0c;春节的表演&#xff1f;…

excel数据处理技巧:组合函数统计产品批号

这是一个看似普通的编号问题&#xff0c;可竟然动用了TEXT和SUMPRODUCT两个重量级的函数共同出手才得以解决。以往遇到的编号问题&#xff0c;大多数都是COUNTIF的拿手好戏&#xff0c;但是今天这个问题COUNTIF完全插不上手&#xff0c;来看看模拟的数据吧。 如图所示&#xff…

「 理财与风险控制|养老系列」你想象中的高端养老社区是什么样?

本文主要介绍为什么养老规划需要考虑养老社区的部分&#xff0c;当前市场上养老社区的各种现状&#xff0c;养老社区从各个角度分类&#xff0c;选择养老社区需要关注的要素以及保险保单能够提供的养老权益是怎样的 文章目录01 为什么要关注养老社区&#xff1f;02 为什么关注高…

QT多窗口编程与文件IO编程

目录 一、消息对话框 QMessageBox&#xff08;掌握&#xff09; 二、常用窗口类&#xff08;掌握&#xff09; 三、主窗口类 QMainWindow&#xff08;重点&#xff09; 四、parent参数&#xff08;掌握&#xff09; 五、窗口传参 5.1 成员函数/构造函数 5.2 信号槽传参 六、事件…

劳动自由——你真的理解马克思说的劳动吗

目录 一、空谈“劳动是一切财富和一切文化的源泉”是错误的 个人理解——剥削与马斯洛需求的满足程度 二、马克思对劳动的定义是什么 三、马克思所说的劳动自由 1、实现劳动自由的实现路径 2、劳动自由的状态 一、空谈“劳动是一切财富和一切文化的源泉”是错误的 空谈所…