CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)

        前言:在网页布局的时候,我们需要将想要的元素放到指定的位置上,这个时候我们就可以使用CSS中的定位操作。


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

先让我们看一下本篇文章的大致内容:

目录

什么是定位

1.相对定位

2.绝对定位

3. 固定定位

4. 粘性定位

5. 定位层级

6. 定位的特殊应用

        (1)让定位元素的宽充满包含块

       (2)让定位元素在包含块中居中


什么是定位

        在了解有哪些定位之前,让我们先来了解一下什么是定位:(以下为官网解释

CSS中 position属性(即定位)用于指定一个元素在文档中的定位方式。left、right、top和bottom属性则决定了该元素的最终位置。

从官网的解释中我们可以知道,CSS中 position属性(即定位)是用于调整html中元素的位置的。

        在上文中,我们已经了解了什么是定位,在下文我们会讲解不同的定位方式,首先来看第一个,相对定位。

1.相对定位

        首先我们要考虑的就是如何对所想要的元素开启相对定位:(方法如下)

给元素设置 position:relative 即可实现相对定位。

在上文所说,定位即调整html中的元素的位置,那么开启了相对定位之后,我们如何对其位置进行调整呢?

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

那么相对定位的参考点在哪里?

其相对的是自己原来的位置。

案例演示:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div class="outer"><div class="inner">这是内部元素</div></div>
</body>
</html>

CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;
}
.inner {width: 100px;height: 100px;background-color: orange;border: 2px solid black;position: relative;left: 50px;top: 50px;
}

从上图我们就可以看到内部橙色背景的元素偏离了自己原来的位置横竖各50px,这样我们就大致的了解了相对定位的使用了!

补充:相对定位的特点

1.  不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
2.  定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。默认规则是:
        (1)定位的元素会盖在普通元素之上。
        (2)都发生定位的两个元素,后写的元素会盖在先写的元素之上。
3.  left 不能和right 一起设置, top 和bottom 不能一起设置。
4.  相对定位的元素,也能继续浮动,但不推荐这样做。
5.  相对行为的元素,也能通过margin 调整位置,但不推荐这样做。

注意:绝大多数情况下,相对定位会与绝对定位配合使用。(下文会讲)!

这样我们就了解了所有关于相对定位的内容了。

2.绝对定位

        对于绝对定位,我们如何设置绝对定位呢?

给元素设置 position: absolute 即可实现绝对定位。

那么开启了绝对定位之后,我们如何对其位置进行调整呢?

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

绝对定位的参考点在哪里呢?

参考它的包含块。

看到这,有读者就会问了,什么是包含块,在之前的学习中并没有讲解过什么是包含块啊?(以下即是包含块的概念)

包含块:

1. 对于没有脱离文档流的元素:包含块就是父元素;
2. 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都
没定位,那包含块就是整个页面)。

从包含块概念的第二条中,我们就可以理解上文讲解相对定位时候所说的绝大多数情况下,相对定位会与绝对定位配合使用了)

案例演示:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div class="outer"><div class="inner">这是内部元素</div></div>
</body>
</html>

CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;
}
.inner {width: 100px;height: 100px;background-color: orange;border: 2px solid black;position: absolute;right: 50px;top: 50px;
}

在CSS代码中,内部元素的所有父类都没有开启定位,所有这里就是如果所有祖先都没定位,那包含块就是整个页面。

如果给其父类开启定位,CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;position: relative;
}
.inner {width: 100px;height: 100px;background-color: orange;border: 2px solid black;position: absolute;right: 50px;top: 50px;
}

这样我们就大致的了解了绝对定位的使用规则了!

补充:绝对定位元素的特点:

1.  脱离文档流,会对后面的兄弟元素、父元素有影响。
2.  left 不能和right 一起设置, top 和bottom 不能一起设置。
3.  绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
4.  绝对定位的元素,也能通过margin 调整位置,但不推荐这样做。
5.  无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。

这样我们就了解了所有关于绝对定位的内容了。

3. 固定定位

         对于绝对定位,我们如何设置固定定位呢?

给元素设置 position: fixed 即可实现固定定位。

那么开启了固定定位之后,我们如何对其位置进行调整呢?

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

固定定位的参考点在哪里呢?

参考它的视口。

什么是视口?—— 对于PC 浏览器来说,视口就是我们看网页的那扇“窗户”。(如图)

案例演示:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div class="outer"><div class="inner">这是内部元素</div></div>
</body>
</html>

CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;position: relative;
}
.inner {width: 100px;height: 100px;background-color: orange;border: 2px solid black;position: fixed;top: 0px;right: 0px;
}

我们会发现,即使其父元素开启了定位,但是固定定位的参考点也是视口。

注意:当浏览页面顶部时,定位元素处于右上角。在滚动后,它相对于视口仍处于同一位置。

这样我们就大致的了解了固定定位的使用规则了!

补充:固定定位元素的特点

1.  脱离文档流,会对后面的兄弟元素、父元素有影响。
2.  left 不能和right 一起设置, top 和bottom 不能一起设置。
3.  固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
4.  固定定位的元素,也能通过margin 调整位置,但不推荐这样做。
5.  无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。

这样我们就了解了所有关于固定定位的内容了。

4. 粘性定位

         对于绝对定位,我们如何设置绝对定位呢?

给元素设置 position:sticky 即可实现粘性定位。

那么开启了粘性定位之后,我们如何对其位置进行调整呢?

我们只需要使用 left 、right 、top 、bottom 四个属性调整位置即可。

粘性定位的参考点在哪里呢?

离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。

案例演示:

CSS代码:

.inner {height: 50px;background-color: orange;border: 2px solid black;position: sticky;top: 10px;
}

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

在视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到视口回滚到阈值以下。

这里给读者一段代码,读者可以复制到编译器上尝试一下效果:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div><dl><dt>A</dt><dd>Andrew W.K.</dd><dd>Apparat</dd><dd>Arcade Fire</dd><dd>At The Drive-In</dd><dd>Aziz Ansari</dd></dl><dl><dt>C</dt><dd>Chromeo</dd><dd>Common</dd><dd>Converge</dd><dd>Crystal Castles</dd><dd>Cursive</dd></dl><dl><dt>E</dt><dd>Explosions In The Sky</dd></dl><dl><dt>T</dt><dd>Ted Leo & The Pharmacists</dd><dd>T-Pain</dd><dd>Thrice</dd><dd>TV On The Radio</dd><dd>Two Gallants</dd></dl></div>
</body>
</html>

CSS代码:

* {box-sizing: border-box;}dl {margin: 0;padding: 24px 0 0 0;}dt {background: #b8c1c8;border-bottom: 1px solid #989ea4;border-top: 1px solid #717d85;color: #fff;font:bold 18px/21px Helvetica,Arial,sans-serif;margin: 0;padding: 2px 0 0 12px;position: -webkit-sticky;position: sticky;top: -1px;}dd {font:bold 20px/45px Helvetica,Arial,sans-serif;margin: 0;padding: 0 0 0 12px;white-space: nowrap;}dd + dd {border-top: 1px solid #ccc;}

注意:粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定

这样我们就大致的了解了粘性定位的使用规则了!

粘性定位的用处:

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时,始终处于 A 的下方。而在开始滚动 B 部分时,B 的头部会固定在屏幕顶部,直到所有 B 的项均完成滚动后,才被 C 的头部替代。

补充:粘性定位元素的特点

1.  不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
2.  最常用的值是top 值。
3.  粘性定位和浮动可以同时设置,但不推荐这样做。
4.  粘性定位的元素,也能通过margin 调整位置,但不推荐这样做。

这样我们就了解了所有关于粘性定位的内容了。

5. 定位层级

        了解完了不同类型的定位之后,现在让我们了解一下定位的层级(即谁显示在上边,谁显示在下边)

定位层级规定:

1.  定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
2.  如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
3.  可以通过 css 属性 z-index 调整元素的显示层级。
4.  z-index 的属性值是数字,没有单位,值越大显示层级越高。
5.  只有定位的元素设置 z-index 才有效。
6.  如果z-index 值大的元素,依然没有覆盖掉z-index 值小的元素,那么请检查其包含块的层级。

也就是说,我们可以给所需元素设置其定位层级,使其在开启定位中显示在更上层。

6. 定位的特殊应用

说在前面,注意:

1. 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高。
2. 发生相对定位后,元素依然是之前的显示模式。
3. 以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。

了解完了定位的设置与使用之后,在让我们看一下定位属性的一些特殊应用场景:

        (1)让定位元素的宽充满包含块

1. 块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为0 。

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div class="outer"><div class="inner">这是内部元素</div></div>
</body>
</html>

CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;position: relative;
}
.inner {height: 100px;background-color: orange;border: 2px solid black;position: absolute;/* 注意这里不能在设置内部元素的宽度了 */left: 0px;right: 0px;
}


        这里会有读者会有疑问,上文中不是说了不能同时设置left和right属性吗?如果同时设置不是只会执行left的效果吗?这里为什么又可以了呢?

        这就是定位的特殊运用了,只要我们不对内部元素设置其宽度,我们同时使用left和right属性,就会使其块宽想与包含块一致,但是如果设置了宽度,那么就会遵循不能同时设置left和right属性的规则。

注意:如果想让块宽想与包含块一致,那么这里就不能在设置内部元素的宽度了!

2. 高度想与包含块一致, top 和 bottom 设置为 0 。

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div class="outer"><div class="inner">这是内部元素</div></div>
</body>
</html>

CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;position: relative;
}
.inner {width: 100px;background-color: orange;border: 2px solid black;position: absolute;/* 注意这里不能在设置内部元素的高度了 */top: 0px;bottom: 0px;
}

 

      

       (2)让定位元素在包含块中居中

学习完定位之后,我们就可以使用定位的操作来让定位元素在包含块中居中。

给想要居中的元素设置其CSS代码:

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

案例演示:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.8.css">
</head>
<body><div class="outer"><div class="inner">这是内部元素</div></div>
</body>
</html>

CSS代码:

.outer {width: 400px;height: 300px;background-color: rgb(176, 176, 176);border: 2px solid black;position: relative;
}
.inner {width: 100px;height: 100px;background-color: orange;border: 2px solid black;position: absolute;left:0;right:0;top:0;bottom:0;margin:auto;
}

注意:这里需要设置其内部元素的宽高,要不就会变成充满整个包含块了(由定位元素的特殊运用(一)得出)

这样我们就了解了定位属性的一些特殊应用场景了!

想了解更多的CSS知识-------------------------------------------->CSS_秋刀鱼不做梦的博客-CSDN博客


以上就是本篇文章所有内容了~~~

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

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

相关文章

在Unity中制作和使用图集

文章目录 使用Unity内置Sprite Packer使用图集NGUI图集制作&#xff08;如果使用NGUI&#xff09;TextMeshPro中文支持 应用案例&#xff1a;在Unity中创建一个使用图集的UI界面场景设定步骤概览1. 准备UI元素2. 创建Sprite Atlas3. 使用图集中的Sprite4. 调整与布局5. 动态加载…

鸿蒙内核源码分析(特殊进程篇)

三个进程 鸿蒙有三个特殊的进程&#xff0c;创建顺序如下: 2号进程&#xff0c;KProcess&#xff0c;为内核态根进程.启动过程中创建.0号进程&#xff0c;KIdle为内核态第二个进程&#xff0c;它是通过KProcess fork 而来的.这有点难理解.1号进程&#xff0c;init&#xff0c…

kubeflow简单记录

kubeflow 13.7k star 1、Training Operator 包括PytorchJob和XGboostJob&#xff0c;支持部署pytorch的分布式训练 2、KFServing快捷的部署推理服务 3、Jupyter Notebook 基于Web的交互式工具 4、Katib做超参数优化 5、Pipeline 基于Argo Workflow提供机器学习流程的创建、编排…

还有谁不想薅云渲染的羊毛?五种云渲染优惠知道就是省到

不管你是效果图设计师还是动画设计师&#xff0c;在面对紧急或大量的渲染任务时&#xff0c;总会有云渲染的需要。然而&#xff0c;现在的云渲染越来越贵&#xff0c;我们该如何尽可能地节约成本完成渲染任务呢&#xff1f;本文将为你介绍云渲染的五种优惠形式&#xff0c;看完…

IP 地址追踪工具促进有效的 IP 管理

网络 IP 地址空间的结构、扫描和管理方式因组织的规模和网络需求而异&#xff0c;网络越大&#xff0c;需要管理的 IP 就越多&#xff0c;IP 地址层次结构就越复杂。因此&#xff0c;如果没有 IP 地址管理&#xff08;IPAM&#xff09;解决方案&#xff0c;IP 资源过度使用和地…

VSCode-vue3.0-安装与配置-export default简单例子

文章目录 1.下载VSCode2.修改语言为中文3.辅助插件列表4.vue3模板文件简单例子5.总结 1.下载VSCode 从官网下载VSCode&#xff0c;并按下一步安装成功。 2.修改语言为中文 点击确认修改&#xff0c;如下图所示&#xff1a; 或者打开命令面板&#xff1a;输入Configure Displ…

浅析扩散模型与图像生成【应用篇】(二十二)——DreamBooth

21. DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation 本文提出一种根据少量样例图片来对文生图模型进行微调的方法&#xff0c;从而可以生成包含样例物体&#xff0c;但风格、姿态、背景都可以任意修改的图片。现有的文生图模型都是需要…

作为新型锂离子电池正极材料 磷酸锰铁锂(LMFP)行业发展空间有望扩展

作为新型锂离子电池正极材料 磷酸锰铁锂&#xff08;LMFP&#xff09;行业发展空间有望扩展 磷酸锰铁锂&#xff08;LMFP&#xff09;指在磷酸铁锂基础上添加锰元素而制成的新型磷酸盐类锂离子电池正极材料。磷酸锰铁锂含有橄榄石型结构&#xff0c;生产成本低、能量密度高、绿…

操作系统之管程

目录 一. 为什么要引入管程二. 管程的定义与基本特征三. 扩展1:用管程来解决生产者和消费者问题四. 扩展2: Java中类似于管程的机制 \quad 一. 为什么要引入管程 \quad \quad 二. 管程的定义与基本特征 \quad \quad 三. 扩展1:用管程来解决生产者和消费者问题 \quad 很智能 \qu…

VM 安装Ubuntu20

1、VM 新建虚拟机 类型配置 - 典型 安装源选择 &#xff08;安装包获取&#xff1a;Ubuntu桌面系统 | Ubuntu&#xff09; 设置计算机名与用户账号密码 为虚拟机命一个名&#xff0c;设置虚拟机文件保存的位置 设置磁盘相关信息 最后一步&#xff0c;确定虚拟机的相关参数 设置…

WDW-10B微机控制电子万能试验机技术方案

一&#xff0e;设备外观照片&#xff1a; 项目简介&#xff1a; 微机控制电子式万能试验机是专门针对高等院校、各种金属、非金属科研厂家及国家级质检单位而设计的高端微机控制电子式万能试验机、计算机系统通过全数字控制器&#xff0c;经调速系统控制伺服电机转动&#xff…

【UE+MQTT】Mqtt Client插件使用记录

步骤 1. 在虚幻商城中下载“Mqtt Client”插件 插件地址&#xff1a;https://www.unrealengine.com/marketplace/zh-CN/product/34cbcaef7a664451a886dba37b4769bc?sessionInvalidatedtrue 文档地址&#xff1a;[虚幻引擎] DT Mqtt 插件详细说明 – DT 2. 在虚幻编辑器中确…

input对接二维码条形码扫描仪输入,检测扫描完成后按下回车事件

二维码和条形码扫描仪其实是模拟键盘输入的操作&#xff0c;只是操作比键盘要快很多&#xff0c;其实想要检测扫描仪输入完成的操作&#xff0c;可以有多种方式&#xff0c;一个是比较笨的&#xff0c;就是设置防抖操作&#xff0c;等间隔超过50ms就算输入完成&#xff0c;还有…

Vue3:menu导航栏出现多个同一跳转路径的菜单处理

文章目录 需求整理实现思路实现过程 需求整理&#xff0c;实现思路 最近公司想将之前老的项目整理出来&#xff0c;因为这个老项目内容太杂什么页面都往里面塞&#xff0c;导致菜单特别多&#xff0c;公司就像将这个老的项目迁出来&#xff0c;这个旧的项目本来是后端PHP写的。…

学完 C++ 基本语法后,您就可以开始学习 Qt 了。

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Qt的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;这些基本语法包括变量、类型、循环、判断、指针…

【启明智显技术分享】基于ESP32-S3方案的彩屏固件烧录指南

前言&#xff1a; 【启明智显】专注于HMI&#xff08;人机交互&#xff09;及AIoT&#xff08;人工智能物联网&#xff09;产品和解决方案的提供商&#xff0c;我们深知彩屏显示方案在现代物联网应用中的重要性。为此&#xff0c;我们一直致力于为客户提供彩屏显示方案相关的技…

Python-VBA函数之旅-repr函数

目录 一、repr函数的常见应用场景 二、repr函数使用注意事项 三、如何用好repr函数&#xff1f; 1、repr函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;https://blog.csdn.net/ygb_1024?spm1010.2135.…

Android单行字符串末尾省略号加icon,图标可点击

如图 设置仅显示单行字符串&#xff0c;末尾用省略号&#xff0c;加跟一个icon&#xff0c;icon可点击 tvName.text "test"val drawable ResourcesCompat.getDrawable(resources, R.mipmap.icon_edit, null)tvName.setCompoundDrawablesWithIntrinsicBounds(null,…

SpringCloud——consul

SpringCloud——consul 一、consul安装与运行二、consul 实现服务注册与发现1.引入2.服务注册3.服务发现 三、consul 分布式配置1.基础配置2.动态刷新3.配置持久化 四、参考 Eureka已经停止更新了&#xff0c;consul是独立且和微服务功能解耦的注册中心&#xff0c;而不是单独作…

Ubuntu20.04 OpenCV详细安装教程(附多版本切换共存教程)

opencv安装有两种方式&#xff1a; 1.使用包管理器安装预编译版本&#xff08;安装十分简单&#xff0c;但是版本只有4.2.0&#xff0c;且没有扩展模块且不支持Qt窗口&#xff09; 2.从源码安装&#xff08;比较复杂&#xff0c;但是推荐&#xff09; 1.安装预编译版本 sud…