• 【网页前端】CSS常用布局之定位

    🔎这里是【前端网页】，关注我学习前端不迷路
    👍如果对你有帮助，给博主一个免费的点赞以示鼓励
    欢迎各位🔎点赞👍评论收藏⭐️

    👀专栏介绍

    【前端网页】 目前主要更新HTML，一起学习一起进步。

    👀本期介绍

    本期主要介绍CSS常用布局之定位

    文章目录

    1. 引言

    2. 概述及分类

    3. 静态定位：（标准流）

    3.1 概述

    4. 相对定位

    4.1 概述&入门案例

    4.2 边偏移

    4.3 进阶案例 1：鼠标移入反馈

    4.4 注意事项&总结

    5. 绝对定位

    5.1 概述&入门案例

    5.2 进阶案例 1：父子关系中的绝对定位

    5.3 进阶案例 2：子绝父相

    5.4 总结

    6. 固定定位

    6.1 概述&入门案例

    6.2 进阶案例 1：父子关系中的固定定位

    6.3 总结

    7. 定位总结

    8. 定位-周边知识

    8.1 叠放次序:z-index

    8.2 定位子元素-水平垂直居中

    1. 引言

    在网页布局中，经常会涉及到将一个元素固定放置在某些位置的操作：

    或者把某些元素固定在页面某个位置，不会随着网页滚动而滚动。

    以上效果，标准流做不到，浮动也无法轻易做到。
    为了轻松实现上述效果，我们就要继续学习 CSS 常用布局的定位知识。

    2. 概述及分类

    定位：将元素固定在某一位置，又称为摆放元素。
    作用：更加方便进行元素的位置调节
    根据用法、特性的不同，定位分为多种模式
    常见定位模式：
    static 静态定位
    relative 相对定位
    absolute 绝对定位
    fixed 固定定位
    下面我们来逐一学习

    3. 静态定位：（标准流）

    3.1 概述

    静态定位：属于元素 默认 定位方式，就是我们常说的标准流。
    即无定位。
    语法：
    选择器 {
    position : static ;
    }
    注意：除非我们需要将元素 由其他定位模式 强制改回 标准流，否则一般情况下不用。

    4. 相对定位

    4.1 概述&入门案例

    相对定位： 元素以 自己原先位置 为参照进行定位。
    语法：
    选择器 {
    position : relative ;
    }
    准备代码

     代码实现：

     效果分析&小结

    小结：
    1 、 相对定位的元素，仍然会占用原来在 标准流 中的位置
    2 、 相对定位可以设置边偏移 ， 会在展示效果上 覆盖标准流（也会覆盖浮动）

    4.2 边偏移

    边偏移：通过上下左右的偏移来移动定位元素。
    作用：在定位中摆放元素
    准备代码：

     常见偏移样式（标准流和浮动无法设置偏移）

    总结：
    1 、 标准流和浮动无法设置边偏移
    2 、 相对定位的边偏移，是 相对于 元素原先在标准流中的位置 来定位的。

    4.3 进阶案例 1：鼠标移入反馈

    我们可以利用边偏移 + 伪类 制造 鼠标移入反馈。
    准备代码： （要求鼠标移入 三个 div ，三个 div 不影响整体布局前提下，分别有移动反馈）
    （移动反馈：元素向左上移动 5px ）

    实现代码：

    小结：
    因为相对定位能使用边偏移，用边偏移的展示效果不会影响其他元素，所以可以用来做一些效果。

    4.4 注意事项&总结

    1 、 标准流 (position:static;) 和 浮动 不能设置边偏移
    2 、相对定位的边偏移，是 相对于 元素原先在标准流中的位置 来定位的。
    3 、 相对定位的元素，仍然会占用原来在 标准流 中的位置

    4、 相对定位会在展示效果上 覆盖标准流（也会覆盖浮动） 

    5. 绝对定位

    5.1 概述&入门案例

    绝对定位：通过设置边偏移，直接将元素放置在页面内或父元素内的某一位置。
    注意：绝对定位元素，将 不占用标准流 位置
    语法：
    选择器 {
    position : absolute ;
    }
    准备代码：（将为绿色 div 设置绝对定位）

     代码实现及效果 1：

     代码实现及效果 2：

    小结：
    1 、 绝对定位元素不占用标准流位置，不影响标准流布局（也不影响浮动）
    2 、 绝对定位元素 展示效果 高于标准流（也高于浮动）
    3 、 绝对定位边偏移起始位置：默认为页面左上角

    5.2 进阶案例 1：父子关系中的绝对定位

    5.2.1 概念及准备代码

    绝对定位在未引入父子元素时，默认的边偏移起始为：页面左上角。
    父子关系中，绝对定位子元素 的边偏移起始位置为： 最近的 定位父元素的 左上角
    准备代码：

    5.2.2 示例 1：父元素没有定位

    示例 1：父元素没有定位

    小结：
    父元素没有定位（相对、绝对、固定），子元素边偏移从页面左上角开始

    5.2.3 示例 2：父元素有定位

    示例 2：父元素有定位。

    小结：
    父元素有定位（相对、绝对、固定），子元素边偏移 从定位父元素 左上角开始

    5.2.4 示例 3：祖父和父元素都有定位

    示例：祖父和父元素都有定位

    小结：
    祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始

    5.2.5 进阶小结

    父子关系中，绝对定位子元素 的边偏移起始位置为： 最近的 定位父元素的 左上角

    5.3 进阶案例 2：子绝父相

    为保持父元素在原有文档流定位，为子元素能在父元素中任意放置。
    布局中有 “子绝父相” 之说。
    子绝父相：子元素绝对定位，其父元素用相对定位。
    准备代码：

    实现代码

    小结：
    父子定位中，通常为了布局的便捷，我们会采取“子绝父相”的布局手法。 

    5.4 总结

    1 、绝对定位元素不占用标准流位置，不影响标准流布局（也不影响浮动）
    2 、绝对定位元素 展示效果 高于标准流（也高于浮动）
    3 、父元素没有定位（相对、绝对、固定），子元素边偏移从页面左上角开始
    祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始
    4 、 为了布局方便，更多采取： 子绝父相

    6. 固定定位

    6.1 概述&入门案例

    固定定位：通过设置边偏移，将元素固定在页面某一位置。
    注意：
    1 、 固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动）
    2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。（绝对定位做不到）
    语法：
    选择器 {
    position : fixed ;
    }
    准备代码

    代码实现及效果：

    小结：
    固定定位不会影响标准流（也不影响浮动）布局，在页面固定，哪怕拖动滚动条也一样。

    6.2 进阶案例 1：父子关系中的固定定位

    固定定位的边偏移，是以页面左上角为起点，不受父元素约束
    准备代码

    代码实现及效果

    小结：
    固定定位的边偏移，是以页面 左上角 为起点， 不受父元素约束

    6.3 总结

    1 、 固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动）
    2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。（绝对定位做不到）
    3 、固定定位的边偏移，是以页面 左上角 为起点，不受父元素约束

    7. 定位总结

    1、定位总结：

    2、无论何种定位，未设置边偏移的定位，都默认摆放在其标准流位置上

    3 、边偏移和 margin 区别：
    边偏移：
    ① 仅用于定位（
    static 不可用，浮动不可用）

    ② 仅改变定位（相对、绝对、固定）元素的展示位置
    margin ：
    ① 所有状态的盒子均可用
    ② 不仅改变展示位置。
    若为标准流、相对定位、浮动，还会扩大其在标准流或浮动中占用的位置。

    8. 定位-周边知识

    8.1 叠放次序:z-index

    因为定位中，后来定位元素会覆盖其他定位元素，导致效果不可控

    所以为了定位展示效果的可控， CSS 提供了定位元素 - 自定义叠放次序的设置。
    叠放次序：用于给定位元素设置展示效果的优先级。
    注意： 1 、 优先级越高，定位元素就越不容易被其他定位元素覆盖
    2 、默认的叠放次序为 auto 。可以理解为 0
    格式: z-index : 整数值 ;
    准备代码：

    示例代码及效果：

    小结：
    1 、 通过为定位元素设置 z-index ，可以调整定位元素优先级
    2 、 仅定位元素才可以设置 z-index ，标准流和浮动设置无效

    8.2 定位子元素-水平垂直居中

    8.2.1 引言&概念

    有时我们存在需要让子元素在父元素中 水平居中的需求，若使用标准流或浮动，我们可以通过设
    置
    margin:0 auto; 来解决。
    但无法解决垂直居中问题，只能不断设置 margin 来解决，不但费时费事，而且无法动态改变。
    所以 CSS 中，我们需要学习如何通过设置边偏移 +margin ，达到水平居中效果。
    常见的 定位子元素 - 水平居中方式：
    1 、 动态居中设置
    2 、 手动居中设置

    8.2.2 动态居中设置

    语法格式：
    选择器 {
    width : 必须设置一个值;
    height : 必须设置一个值;
    position : absolute/fixed ;
    top : 0 ;
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
    margin : auto ;

    }
    注意：
    子元素 - 设置： 绝对 定位，子元素在 父 内 水平垂直居中（如果父是 body ，相当于页面水平垂直居
    中）
    子元素 - 设置： 固定 定位，子元素在 页面 内 水平垂直居中
    适用于：快速设置子元素的水平垂直居中效果。

    8.2.3 手动居中设置

    语法格式：
    选择器 {
    width : 必须设置一个值;
    height : 必须设置一个值;
    position : absolute/fixed ;
    top:50 % ;
    left:50 % ;
    margin-top:-(宽度/2-边框) px ;
    margin-left:-(高度/2-边框) px ;
    }
    注意：
    子元素 - 设置： 绝对 定位，子元素在 父 内 水平垂直居中（如果父是 body ，相当于页面水平垂直居中）
    子元素 - 设置： 固定 定位，子元素在 页面 内 水平垂直居中
    适用于：手动自定义设置子元素的水平垂直居中效果。
    建议使用：动态居中设置。

  • 相关阅读:
    2.求循环小数
    MyBatis-Plus学习
    @Autowired与@Resource区别
    XTU-OJ 1187-Candy
    纯电动汽车杂谈
    卫龙辣条第三次冲刺上市：业绩增速下滑，刘卫平、刘福平提前套现
    su root提示认证失败，无法sudo，锁屏后提示密码不对
    java-net-php-python-jspm餐饮管理系统演示录像2019计算机毕业设计程序
    `英语` 2022/8/20
    Linux入门第六天——vim学习
  • 原文地址：https://blog.csdn.net/weixin_45481821/article/details/125868343