请你学习：前端布局2 - 定位（Positioning）是一种重要的布局技术

news2024/11/25 2:23:21

在页面布局中，定位（Positioning）是一种重要的布局技术，它允许我们精确地控制元素在页面上的位置。定位模式、是否脱标以及移动位置是理解定位的三个关键方面。

1 定位模式

定位模式决定了元素在文档中的定位方式，通过CSS的position属性来设置。常见的定位模式包括：

  1. 静态定位（static）：

    • 是元素的默认定位方式，即元素按照正常的文档流进行布局。
    • 不会发生脱标，也不具备通过top、right、bottom、left属性进行移动的能力。

  2. 相对定位（relative）：

    • 元素首先按照正常文档流进行布局，然后相对于其正常位置进行偏移。
    • 发生偏移后，元素仍然占据原来的空间（不脱标）。
    • 可以通过top、right、bottom、left属性进行移动。

  3. 绝对定位（absolute）：

    • 元素脱离正常文档流，相对于其最近的已定位（即非static定位）祖先元素进行定位。
    • 如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。
    • 发生脱标，不再占据原来的空间。
    • 同样可以通过top、right、bottom、left属性进行移动。

  4. 固定定位（fixed）：

    • 元素脱离正常文档流，相对于浏览器窗口进行定位。
    • 即使页面滚动，元素也会停留在固定的位置。
    • 发生脱标，不再占据原来的空间。
    • 使用top、right、bottom、left属性进行定位。

是否脱标

  • 不脱标：静态定位（static）和相对定位（relative）的元素不会脱离正常文档流，它们仍然占据原来的空间。
  • 脱标：绝对定位（absolute）和固定定位（fixed）的元素会脱离正常文档流，不再占据原来的空间。

移动位置

  • 对于不脱标的元素（static和relative），移动位置实际上是通过改变其在文档流中的相对位置来实现的，比如通过改变其margin或padding值。
  • 对于脱标的元素（absolute和fixed），则是通过position属性的top、right、bottom、left属性来直接指定其在页面上的绝对位置或相对于某个已定位祖先元素的位置。

表格展示

定位模式是否脱标移动位置方式
静态定位（static）否遵循正常文档流
相对定位（relative）否相对于自身原始位置偏移（使用top、right、bottom、left）
绝对定位（absolute）是相对于最近的已定位祖先元素偏移（或相对于初始包含块），使用top、right、bottom、left
固定定位（fixed）是相对于浏览器窗口定位，使用top、right、bottom、left

2 定位的组成

在CSS中，定位（Positioning）确实是一种将盒子（即HTML元素）放置在页面上的特定位置的技术，同时也是一种按照定位方式移动这些盒子的方法。

  1. 定位模式用于指定一个元素在文档中的定位方式。
  2. 边偏移则决定了该元素的最终位置。

CSS中定位模式（position属性）的各个值及其语义展示：

值语义
static元素的默认定位方式。元素按照正常的文档流进行布局，不会被特别定位。top、right、bottom、left 和 z-index 属性不会对其产生影响。
relative元素首先按照正常文档流进行布局，然后相对于其正常位置进行偏移。偏移量由top、right、bottom、left属性确定。元素仍然占据文档流中的空间。
absolute元素脱离文档流，相对于其最近的已定位（即position不是static）祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。偏移量由top、right、bottom、left属性确定。
fixed元素脱离文档流，相对于浏览器窗口（视口）进行定位。即使页面滚动，元素也会保持在固定的位置。偏移量由top、right、bottom、left属性确定。
sticky根据用户的滚动位置，元素在relative和fixed定位之间切换。它通常用于创建粘性头部或侧边栏等效果。元素首先按照正常文档流进行布局，然后当页面滚动到特定位置时，它会相对于其最近的滚动祖先（如果指定了）或视口进行定位，并保持在固定位置，直到页面滚动回原始位置。偏移量由top、right、bottom、left属性之一（取决于具体的布局需求）确定。

CSS定位中的边偏移属性及其简要说明：

边偏移属性描述
top定义元素的上外边距边界与其包含块上边界之间的偏移。对于absolute和fixed定位的元素，它指定了元素的上边缘与其定位上下文的上边缘之间的距离。对于relative定位的元素，它指定了元素的上边缘相对于其正常位置的上移距离。
right定义元素的右外边距边界与其包含块右边界之间的偏移。其工作方式类似于top属性，但方向是向右。
bottom定义元素的下外边距边界与其包含块下边界之间的偏移。对于absolute和fixed定位的元素，它指定了元素的下边缘与其定位上下文的下边缘之间的距离。对于relative定位的元素，它指定了元素的下边缘相对于其正常位置的下移距离。
left定义元素的左外边距边界与其包含块左边界之间的偏移。其工作方式类似于top属性，但方向是向左。

注意：

  • 当使用static定位时，这些边偏移属性不会生效，因为static定位的元素是按照正常的文档流进行布局的。
  • 对于absolute和fixed定位的元素，这些边偏移属性是相对于其定位上下文（通常是最近的已定位祖先元素或视口）进行计算的。
  • 对于relative定位的元素，这些边偏移属性是相对于元素自身在文档流中的正常位置进行计算的。

对于absolute和fixed定位的元素，它们的边偏移属性（top、right、bottom、left）不是相对于static定位的元素来计算的。static定位是元素的默认定位方式，它表示元素会按照正常的文档流进行布局，不会被特别定位，因此它不能作为absolute或fixed定位元素的定位上下文。

  • 对于absolute定位的元素，它的定位上下文是最近的已定位（即position属性不是static）祖先元素。如果没有这样的祖先元素，那么定位上下文就是初始包含块（通常是视口，即浏览器窗口的视图区域）。

  • 对于fixed定位的元素，它的定位上下文始终是视口（viewport），即浏览器窗口的视图区域。这意味着fixed定位的元素会相对于浏览器窗口进行定位，即使页面滚动，它也会保持在固定的位置。

3 相对定位

相对定位（relative）是CSS中的一种定位方式，它允许元素首先按照正常文档流进行布局，然后相对于其正常位置进行偏移。这意味着元素仍然占据文档流中的空间，但它可以通过top、right、bottom、left属性来调整其最终位置。

  • 保持原有位置：在文档流中，元素原本占据的空间不会被其他元素占据，即使它被移动了。
  • 偏移：通过top、right、bottom、left属性，元素可以相对于其原始位置进行偏移。
  • 不影响其他元素：除了元素本身的位置会改变外，其他元素的布局不会受到影响。

相对定位（relative）的元素确实是相对于自己原来的位置来移动的。在移动时，它的参照点（或者说基准点）就是它原本在文档流中的位置。这种移动不会改变元素在文档流中的占据空间，也就是说，它原本在标准流中的位置会继续被保留，并且后续的盒子（元素）仍然会以标准流的方式对待它，就像它没有被移动过一样。

相对定位的一个非常典型的应用就是作为绝对定位（absolute）元素的定位上下文（即父元素）。当绝对定位元素没有设置position属性为非static的父元素时，它会相对于初始包含块（通常是视口）进行定位。 但是，如果我们想要让绝对定位元素相对于页面上的某个特定元素进行定位，就可以将该特定元素设置为相对定位。

假设我们有一个简单的HTML结构，如下所示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>

</body>
</html>

4 绝对定位

绝对定位（absolute）的元素在移动位置时，是相对于其最近的已定位（即position属性不是static）祖先元素来说的。这里所说的“已定位”祖先元素，指的是在文档树中向上查找时，遇到的第一个position属性被设置为relative、absolute、fixed或sticky的元素。如果没有这样的祖先元素，那么绝对定位的元素将相对于初始包含块（initial containing block）进行定位，这通常是视口（viewport）或HTML文档的根元素（<html>元素）。

因此，我们可以说绝对定位是一种“拼爹型”的定位方式，因为它依赖于其祖先元素的定位状态来确定自己的位置。

此外，还需要注意的是，绝对定位的元素会脱离文档流，也就是说，它们不再占据原本在文档流中的空间。这可能会导致文档流中的其他元素重新排列以填补空白。因此，在使用绝对定位时，需要仔细考虑其对文档布局的影响。

无父亲或者父亲无定位

在这里插入图片描述

父级有定位

在这里插入图片描述

5 子绝父相的由来

“子绝父相”这句话是CSS布局中一个非常重要的口诀，它简洁地概括了在使用绝对定位（absolute）时的一种常见做法：当子元素需要采用绝对定位时，其父元素（或更准确的说是定位上下文）应该设置为相对定位（relative）。

这种做法之所以重要且常用，原因有以下几点：

  1. 控制定位基准：通过将父元素设置为相对定位，我们可以确保子元素的绝对定位是相对于这个父元素进行的，而不是相对于初始包含块（如视口）。这使得我们能够更精确地控制子元素的位置，特别是在复杂的页面布局中。

  2. 避免布局混乱：如果父元素没有设置为相对定位（或其他非static定位），子元素的绝对定位可能会相对于视口或其他更远的祖先元素进行，这可能导致布局上的混乱和难以预测的结果。通过将父元素设置为相对定位，我们可以确保子元素的定位是可控和可预测的。

  3. 保持文档流：虽然绝对定位的元素会脱离文档流，但它们仍然会相对于某个已定位的祖先元素进行布局。这个祖先元素（即父元素）本身在文档流中的位置是保留的，这有助于保持页面布局的整体结构和可读性。

  4. 灵活性：通过将父元素设置为相对定位，我们可以更灵活地调整子元素的位置，而不需要改变HTML结构或添加额外的元素作为定位上下文。这简化了布局过程，并使得代码更加清晰和易于维护。

这就是“子绝父相”的由来：子元素使用绝对定位以实现精确的位置控制，而父元素则使用相对定位以限制子元素的移动范围并保留在文档流中的位置。

6 固定定位

2024/08/ 03未完待续。。。预计本周完成！！！敬请期待

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

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

相关文章

一款完全免费的数据恢复软件

一款完全免费的数据恢复软件

WinFR&#xff0c;Windows文件恢复&#xff08;微软命令行程序&#xff09;的免费图形界面&#xff0c;帮您轻松恢复文件。WinFR是免费的Windows数据恢复替代方案&#xff0c;支持U盘数据恢复、硬盘数据恢复、存储卡数据恢复、文件数据恢复等功能。WinFR完全调用Windows文件恢复…
阅读更多...
简单的docker学习 第2章docker引擎

简单的docker学习 第2章docker引擎

第2章docker引擎 2.1Docker 引擎发展历程 2.1.1 首发版本架构 Docker 在首次发布时&#xff0c;其引擎由两个核心组件构成&#xff1a;LXC&#xff08;Linux Container&#xff09;与 Docker Daemon。不过&#xff0c;该架构依赖于 LXC&#xff0c;使得 Docker 存在严重的问…
阅读更多...
第一百八十六节 Java XML教程 - Java DOM编辑

第一百八十六节 Java XML教程 - Java DOM编辑

Java XML教程 - Java DOM编辑 属性 以下代码显示如何向元素添加属性。 import java.io.StringWriter;import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.transform.OutputKeys; import javax.xml.transform.Tr…
阅读更多...
【OS】AUTOSAR OS Spinlock实现原理（下篇）

【OS】AUTOSAR OS Spinlock实现原理（下篇）

目录 3.1 Spinlock配置代码 3.1.1 Os_SpinlockConfigType_Tag 3.1.2 Os_LockConfigType_Tag 3.1.3 不同配置参数对配置代码生成的影响 3.2 Os_GetSpinlock详解 3.2.1 Os_SpinlockIsNotLockedLocal 3.2.2 Os_SpinlockIsLockOrderValid 3.2.3 Os_SpinlockSuspendByMethod…
阅读更多...
bias偏置项（bias term）

bias偏置项（bias term）

bias偏置项&#xff08;bias term&#xff09;或者称为截距项&#xff08;intercept term&#xff09; 简称b 它其实就是函数的截距&#xff0c;与线性方程y wx b中的b的意义是一样的。 在y wx b中&#xff0c;b表示函数在y轴上的截距&#xff0c;控制着函数偏离原点的距…
阅读更多...
食品安全知识竞赛规则及流程方案

食品安全知识竞赛规则及流程方案

活动简介 本届竞赛以“反食品浪费”为主线&#xff0c;在专业知识比拼基础上&#xff0c;融入了食物贮存方法、标签标识认知等生活化场景&#xff0c;将科普知识与日常生活紧密结合&#xff0c;更深入地践行“以赛促学 以学促行”的比赛口号&#xff0c;旨在通过大学生群体带动…
阅读更多...
vue3集成LuckySheet实现导入本地Excel进行在线编辑，以及导出功能

vue3集成LuckySheet实现导入本地Excel进行在线编辑，以及导出功能

第一步&#xff1a;克隆或者下载下面的代码 git clone https://github.com/dream-num/Luckysheet.git第二步&#xff1a;安装依赖 npm install npm install gulp -g 第三步&#xff1a;运行 npm run dev效果如下图所示 第四步&#xff1a;打包 打包执行成功后&#xff0c;…
阅读更多...
萤石摄像头更换wifi操作记录

萤石摄像头更换wifi操作记录

手机和摄像头在同一wifi下下载萤石云视频app长按reset,蓝灯常闪app中配置WiFi&#xff0c;要输入设备验证码&#xff0c;在设备上有配置完就可以了 H264编码修改方法https://open.ys7.com/bbs/article/14
阅读更多...
️ LangChain +Streamlit+ Llama ：将对话式人工智能引入您的本地设备（下篇）

️ LangChain +Streamlit+ Llama ：将对话式人工智能引入您的本地设备（下篇）

引言&#xff1a;种下一棵树最好的时间是十年前,其次是现在 书接上回&#xff1a;将对话式人工智能引入您的本地设备成为可能CSDNhttps://mp.csdn.net/mp_blog/creation/editor/140865426 目的&#xff1a;在这个大模型横行的时候&#xff0c;我们常用电脑如何开展大模型的工作…
阅读更多...
抽帧剪辑手法有哪些有什么好处 抖音抽帧补帧能不能提高作品原创度 抽帧剪辑可以防止被判搬运么 会声会影视频制作教程 会声会影中文免费下载

抽帧剪辑手法有哪些有什么好处 抖音抽帧补帧能不能提高作品原创度 抽帧剪辑可以防止被判搬运么 会声会影视频制作教程 会声会影中文免费下载

如果作品过不了原创检测&#xff0c;那么建议你一定要学会抽帧剪辑&#xff0c;这是目前最有效的防搬运检测手段。精细化地抽帧、补帧&#xff0c;可以轻松通过视频平台的原创和版权检测&#xff0c;避免视频被判搬运。在抖音或快手上进行短视频创作时&#xff0c;‌抽帧和补帧…
阅读更多...
JS+CSS案例：JS+CSS 实现漂亮时尚的样式表切换（换肤）功能

JS+CSS案例：JS+CSS 实现漂亮时尚的样式表切换（换肤）功能

切换样式表可能有人不理解&#xff0c;但说到网站换肤&#xff0c;大概率就很多人都明白了。因为它是很多网站都已经有的功能了&#xff0c;最常见的就是很多网站的关灯模式。本文&#xff0c;就给大家分享一个我自己网站上使用的样式表切换的方案。 案例效果 目录结构 文件准…
阅读更多...
Ubuntu22.04 解决fabric 安装gradle构建的Java合约超时

Ubuntu22.04 解决fabric 安装gradle构建的Java合约超时

问题 fabric安装gradle构建的Java合约时遇到合约代码编译超时问题&#xff0c;如下&#xff1a; $ peer lifecycle chaincode install cp.tar.gz Error: chaincode install failed with status: 500 - failed to invoke backing implementation of InstallChaincode: could …
阅读更多...
宝塔面板上，安装rabbitmq

宝塔面板上，安装rabbitmq

废话不多说&#xff0c;直接上干货&#xff01; 第一步&#xff1a;登录宝塔账号&#xff0c;在软件商店里搜索 第二步&#xff1a;点击设置 第三步&#xff1a;已经完成了&#xff0c;还看啥&#xff01;
阅读更多...
3D魔方lua核心脚本制作

3D魔方lua核心脚本制作

制作不易，请好好欣赏 U→R→F→D→L→B 废话不多说，上脚本 --魔方基本运行程序 --星空露珠优化脚本lua --主核心来自分享 --666 --[=[ #G4=I 1 # 2-----------2------------1 # | U1(0) U2(1) U3(2) | # …
阅读更多...
Java:Thread类

Java:Thread类

Thread的常见构造方法 Thread的常见属性 ID 是线程的唯一标识,不同线程不会重复名称是在使用各种调试工具时会用到的状态表示线程当前所处的情况优先级高的线程理论上来说更容易被调度到关于后台线程,需要记住:JVM会在一个进程的所有非后台线程结束后,才会结束运行是否存活,即r…
阅读更多...
基于python做镜像文件

基于python做镜像文件

用python制作网页镜像文件 第一步&#xff1a;初始化操作&#xff0c;用可用镜像源&#xff1a; mkdir -p /etc/docker tee /etc/docker/daemon.json <<-EOF { "registry-mirrors": ["https://hub.docker-alhk.dkdun.com/"] } EOF systemctl daemon…
阅读更多...
攻击者劫持 Facebook 页面用于推广恶意 AI 照片编辑器

攻击者劫持 Facebook 页面用于推广恶意 AI 照片编辑器

近日&#xff0c;有攻击者劫持了 Facebook 上的网页&#xff0c;诱骗用户下载一个合法的人工智能&#xff08;AI&#xff09;照片编辑器&#xff0c;但实际上他们真正下载的却是一个专门用以盗取用户的凭据信息窃取程序。 趋势科技的研究人员发现的这一恶意广告活动利用了人工…
阅读更多...
ModuleNotFoundError: No module named ‘tqdm‘

ModuleNotFoundError: No module named ‘tqdm‘

报错信息&#xff1a; tqdm是一个快速、可扩展的Python进度条库&#xff0c;用于展示迭代器的长循环执行进度。 解决&#xff1a;通过以下命令安装 使用conda命令安装 conda install tqdm使用pip安装&#xff1a; pip install tqdm
阅读更多...
临床数据科学中有关试验设计的四个关键要素

临床数据科学中有关试验设计的四个关键要素

临床数据科学是现代医学研究中不可或缺的组成部分&#xff0c;通过科学的方法和统计分析工具来揭示医疗数据背后的规律和真相。试验设计是临床数据科学的核心环节&#xff0c;直接关系到研究结果的可靠性和科学性。 在过去几十年中&#xff0c;随机临床试验&#xff08;Randomi…
阅读更多...
CNN卷积网络实现MNIST数据集手写数字识别

CNN卷积网络实现MNIST数据集手写数字识别

步骤一&#xff1a;加载MNIST数据集 train_data MNIST(root./data,trainTrue,downloadFalse,transformtransforms.ToTensor()) train_loader DataLoader(train_data,shuffleTrue,batch_size64) # 测试数据集 test_data MNIST(root./data,trainFalse,downloadFalse,transfor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023