CSS基础:position定位的5个类型详解!

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

279篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 中的position属性用于控制元素的定位方式,有以下 5 个属性值:static:默认值,relative:相对定位,absolute:绝对定位,fixed:固定定位,sticky:粘性定位。

因为position是定位属性,所以要配合以下 4 个方位属性进行定位:

  1. top:距离定位父元素或包含块顶部的距离。

  2. right:距离定位父元素或包含块右侧的距离。

  3. bottom:距离定位父元素或包含块底部的距离。

  4. left:距离定位父元素或包含块左侧的距离。

这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离,正负值皆可以。

需要注意的是,在使用这四个方位属性进行定位时,前提是需要设置元素的position属性值,否则方位属性不会生效。其实定位这个属性,在布局中挺常见的,比如,我圈的这些,好,那我们来看一下吧。

图片

5 个属性值

这里详细介绍一下 CSS 中的 position 属性的五个取值及其特性,以及常见的网页使用场景。

1、static(静态定位):

  • 默认值,在文档流中按照正常顺序进行定位。这个就是咱们的正常布局。

  • 忽略 toprightbottom 和 left 属性。

  • 常用于元素需要按照正常文档流显示的情况,不需要特殊定位的情况。

代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #e98b8b;position: static;}</style></head><body><div class="box">我设置了 position: static;</div></body>
</html>

2、relative(相对定位):

  • 相对于元素在文档流中的正常位置进行定位。

  • 可以通过 toprightbottom 和 left 属性进行微调,不会影响其他元素的位置。

  • 常用于对元素进行小幅度调整或动画效果的情况,不影响文档流。

代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #e98b8b;position: relative;left: 100px;top: 100px;}</style></head><body><div class="box">我设置了 position: relative; 属性</div></body>
</html>

效果如下:

图片

3、absolute(绝对定位):

  • 相对于其最近的已定位祖先元素(父元素设置了除 static 以外的定位)进行定位,如果没有已定位的祖先元素,则相对于最初的包含块(通常是页面)进行定位。

  • 不占据文档流中原有位置,元素脱离正常文档流。

  • 常用于创建悬浮层、工具提示和下拉菜单等,需要脱离文档流的情况。比如,网易的这块,我们能不能模拟一下呢,可以。这个网易云音乐首页内部圈的这块,就是相对于父级定位的。

    图片

这个使用场景还是很多的,大多情况下,absolute不直接相对于 body。我们也做一个相对于父级定位的,对一个元素来做一个定位到底部的和右上角的。

来看代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Relative and Absolute Positioning Example</title><style>* {margin: 0;padding: 0;}.parent {position: relative; /* 父级使用相对定位 */width: 355px;height: 345px;border: 1px solid #000;background-color: #ccffcc; /* 绿色背景 */}img {width: 100%;display: block;}.bottom-box {position: absolute; /* 子级使用绝对定位 */bottom: 0; /* 固定在父级的底部 */left: 0; /* 固定在父级的左侧 */width: 100%; /* 子级宽度设置为100%,以适应父级宽度 */height: 30px; /* 子级高度为30像素 */background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */color: #fff;line-height: 30px;}.bottom-box p {padding: 0px 10px;}.right-top-icon {position: absolute;right: 0;top: 0;width: 40px;}</style></head><body><div class="parent"><div class="bottom-box"><p>这是底部的定位</p></div><img src="img/img1.png" alt="" /><img class="right-top-icon" src="img/hot-icon1.png" alt="" /></div></body>
</html>

效果如图:

图片

4、fixed(固定定位):

  • 相对于浏览器窗口进行定位。

  • 页面滚动时,元素保持固定位置不变。

  • 常用于创建固定的导航栏、页脚或悬浮广告等,始终保持可见性。比如,京东的这块。

    图片

5、 sticky(粘性定位):

  • 一开始按照正常文档流进行定位,当滚动到指定位置时变为固定定位。

  • 常用于创建吸顶的导航栏或侧边栏,在滚动到一定位置后保持可见性。比如,京东的这块:

    图片

fixedsticky这 2 个属性,我们就直接用一个案例来演示了:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS Positioning Examples</title><style>.fixed-example {background-color: #ffffcc; /* 黄色背景 */position: fixed; /* 相对于浏览器窗口定位,无论如何滚动页面,始终停留在右侧 */bottom: 10%;right: 20px;width: 100px;height: 200px;}.fixed-example p {text-align: center;}.sticky-example {padding: 10px 20px;background-color: #e33131; /* 青色背景 */position: sticky;top: 20px; /* 相对于其包含块定位 */}.sticky-example a {padding: 10px 20px;margin-right: 10px;font-size: 16px;font-weight: bold;color: #fff;}.content {padding-top: 500px;height: 1500px; /* 确保页面足够长以展示fixed和sticky效果 */background-color: #f0f0f0;}</style></head><body><div class="content"><div class="sticky-example"><a href="#">这是导航1</a><a href="#">这是导航1</a><a href="#">这是导航1</a><a href="#">这是导航1</a></div>设置VS Code字体大小的方法如下:12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中,点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下:12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中,点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下:12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中,点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下:12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中,点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下:12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中,点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下:12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中,点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。</div><div class="fixed-example"><p>Fixed Positioning:</p><p><a href="#">为你推荐</a></p><p><a href="#">客服</a></p><p><a href="#">反馈</a></p></div></body>
</html>

效果如下。

图片

延伸!重要!遮挡元素的层叠顺序问题

有时候,当页面上有多个元素重叠在一起时(比如使用了绝对定位或固定定位),它们可能会互相遮挡。这时,就需要调整它们的层叠顺序,以确定哪个元素应该显示在上面。

那,z-index 属性主要就用于控制元素的堆叠顺序,即元素在页面上的显示顺序。

它的取值可以是正整数、负整数或 0,正整数表示元素的堆叠顺序越大,负整数表示元素的堆叠顺序越小,0 表示元素的堆叠顺序不变。

这个属性就像是,当你在一场人群聚会中,大家都在交谈,有时候你想要吸引大家的注意力,你可能会站在比较显眼的位置,比如一个高台上,这样你就能够更容易被人看到和听到。

在这个情景中,z-index 属性就像是你选择站在高台上,使得你相对于其他人更加突出和显眼,这样就容易理解了。

代码如下,你可以全都注释掉z-index属性 看其外观,然后从 1~3 一个个放开看其效果,就明白了~

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS Positioning Examples</title><style>.container {position: relative;width: 200px;height: 200px;}.box {width: 200px;height: 200px;position: absolute;top: 0px;left: 0px;}.box1 {background-color: #e98b8b;z-index: 3;}.box2 {background-color: #8be999;z-index: 2;}.box3 {background-color: #3a33c3;z-index: -1;}</style></head><body><div class="container"><div class="box box1">1 属性</div><div class="box box2">2 属性</div><div class="box box3">3 属性</div></div></body>
</html>

效果如下:

图片

OK,本文完。

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

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

相关文章

Andorid复习

组件 TextView 阴影 android:shadowColor"color/red" 阴影颜色android:shadowRadius"3.0" 阴影模糊度&#xff08;大小&#xff09;android:shadowDx"10.0" 横向偏移android:shadowDy"10.0" 跑马灯 这里用自定义控件 public cla…

日本极致产品力 | 源自内蒙古,日本99.7%的人都喝过都百年畅销饮料

​《极致产品力》日本深度研学是一个顾问式课程,可以帮助企业找产品、找方向、找方法,在日本终端市场考察中洞悉热销产品背后的成功逻辑,了解最新最前沿的产品趋势和机会。结合日本消费趋势中国转化的众多经验,从品牌、包装、卖点、技术和生产工艺等多方面寻找中国市场的解决方…

WIFI/BT中蓝牙的硬件资源是如何调度的 UART和PCM接口传输的是什么信号

安卓或IOS手机中&#xff0c;wifi/bt中的蓝牙是如何调度硬件资源的&#xff0c;尤其是UART和PCM是如何分配的。M.2 wifi/bt模块或其他形式的模块中&#xff0c;蓝牙是如何调度硬件资源的&#xff0c;尤其是UART和PCM是如何分配的。今天我们就图文并茂的解决这个问题。 蓝牙文件…

新买的设备自带的仪器校准证书,是否可以作为校准报告使用?

设备在刚刚购买时&#xff0c;有些商家会承诺&#xff0c;在交付设备的同时&#xff0c;还会交付设备的校准证书&#xff0c;这证书是附赠的&#xff0c;属于商家给客户的一种福利&#xff0c;面对附赠的仪器校准证书&#xff0c;很多客户也会有疑惑&#xff0c;这附赠的证书有…

UTONMOS:用区块链技术拓展商业边界在哪里?

引言 大约从 2021 年Web 3 这个新概念开始受到风险基金和科技圈的普遍关注。但如果你对过去几年区块链的发展历史足够了解&#xff0c;就应该已经意识到现在的 Web 3 并不是什么新技术&#xff0c;甚至不是旧技术的进步&#xff0c;它只是一个基于区块链技术的宏大构想。 我是…

Unity 如何制作和发布你的 Package

一、制作你的第一个 Package Unity Package 不做过多赘述&#xff0c;像 URP 本质上也是一个 Package&#xff0c;在 Unity 中可以通过菜单栏 → Window → Package manager 来管理你当前的所有 Package 本篇文章主要介绍&#xff1a;如何制作并发布属于你的 Package 1.1 Pac…

自制贪吃蛇小游戏

此片文章涉及到到控制台设置的相关操作&#xff0c;虚拟键码&#xff0c;宽字符输出等&#xff0c;有些地方大家可能会看不懂&#xff0c;可以阅读以下文章来进一步了解&#xff1a; 控制台程序设置-CSDN博客 效果展示&#xff1a; QQ2024428-181932 源码已放在文章结尾 目录 …

Graph Neural Networks(GNN)学习笔记

本学习笔记的组织结构是&#xff0c;先跟李沐老师学一下&#xff0c;再去kaggle上寻摸一下有没有类似的练习&#xff0c;浅做一下&#xff0c;作为一个了解。 ———————————0428更新—————————————— 课程和博客看到后面准备主要看两个&#xff1a;GCN和…

ubuntu安装Anaconda安装及conda使用

一. 安装anaconda3详细教程 1、下载镜像 清华大学开源软件镜像站下载地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 下拉到最低端选择Linux&#xff0c;选择最新版&#xff08;32/64位&#xff09;下载。这里我下载的是版本Anaconda3-4.3.30-Linux…

Java中的File类

File类概述和构造方法 File&#xff1a;它是文件和目录路径名的抽象表示 文件和目录是可以通过File封装成对象的 对于File而言&#xff0c;其封装的并不是一个真正存在的文件&#xff0c;仅仅是一个路径名而已&#xff0c;它可以存在&#xff0c;也可以不存在 我们对Fie的操…

大厂常见算法50题-替换空格

专栏持续更新50道算法题&#xff0c;都是大厂高频算法题&#xff0c;建议关注, 一起巧‘背’算法! 文章目录 题目解法一 String类replace方法解法二 遍历替换总结 题目 解法一 String类replace方法 String类自带的replace&#xff0c;方法传入两个char类型的参数&#xff0c;分…

【MySQL 数据宝典】【索引原理】- 004 优化示例-join in exist

一、join 优化原理 1.1 基本连接方式介绍 JOIN 是 MySQL 用来进行联表操作的&#xff0c;用来匹配两个表的数据&#xff0c;筛选并合并出符合我们要求的结果集。 1.2 驱动表的定义 1.2.1 什么是驱动表 多表关联查询时,第一个被处理的表就是驱动表,使用驱动表去关联其他表.驱…

使用 SSH 密钥配置 Git 账号需要以下步骤

1、生成 SSH 密钥&#xff1a; 如果你还没有 SSH 密钥&#xff0c;可以使用以下命令在电脑终端中生成一个新的 SSH 密钥&#xff1a; ssh-keygen -t rsa -b 4096 -f /Users/XXXX/.ssh/id_rsa_my_personal -C "your_emailexample.com" ssh-keygen 是用于生成 SSH 密…

《Fundamentals of Power Electronics》——Buck、Boost、Buck-Boost三个电路的CCM-DCM工作特性总结

Buck、Boost、Buck-Boost这三个电路的CCM-DCM工作特性总结如下表所示&#xff1a; Buck、Boost、Buck-Boost这三个电路工作在DCM模式下电压传输比的对比图如下所示&#xff1a; 由上图可知&#xff0c;Buck-Boost电路的工作特性是一条斜率为的直线&#xff0c;Buck电路和Boost电…

RK3588 - RKNN(Rockchip 神经处理单元)的逆向工程

本文翻译自https://jas-hacks.blogspot.com/2024/02/rk3588-reverse-engineering-rknn.html RK3588 NPU 的内部操作和功能主要隐藏在名为RKNPU2的闭源 SDK 中。由于对大型语言模型 (LLM) 的兴趣以及对transform模型最佳矩阵乘法的追求&#xff0c;想了解 RKNPU SDK 新引入的矩阵…

自动开箱机:提升包装物流效率的关键设备

随着电子商务的飞速发展&#xff0c;物流行业面临着重要的挑战和机遇。如何在保证服务质量的同时&#xff0c;提高物流效率&#xff0c;降低成本&#xff0c;成为摆在物流企业面前的重要课题。在这个背景下&#xff0c;自动开箱机以其高效、精准、省力的特点&#xff0c;正逐渐…

OpenMM——教程学习(1)

如何从零开始做一个蛋白小分子动力学模拟 AmberTools将被用来生成输入文件&#xff0c;OpenMM 将被用来运行模拟&#xff0c;模拟平台为在线百度AI Stuio, 并使用GPU加速。 First thing’s first, 到PDB 蛋白数据库下载一需要模拟的靶点晶体&#xff0c;备用。 1. H web server…

一文讲清:什么是供应商管理?供应商管理怎么做?

供应商管理指的是对供应商的了解、选择、开发、使用和控制等综合性管理工作的总称。其目的在于建立起一个稳定可靠的供应商队伍&#xff0c;为企业生产提供可靠的物资供应。但是企业在进行供应商管理往往面临以下问题&#xff1a; 1、招投标&#xff0c;信息不透明 这主要表…

R语言的基本图形

一&#xff0c;条形图 安装包 install.packages("vcd") 绘制简单的条形图 barplot(c(1,2,4,5,6,3)) 水平条形图 barplot(c(1,2,4,5,6,3),horiz TRUE) 堆砌条形图 > d1<-c("Placebo","Treated") > d2<-c("None",&qu…

你不需要总是在 React 中使用 useState

在我审查的一个拉取请求中&#xff0c;我注意到在许多拉取请求中看到的一种模式。React 组件具有多个 UI 状态&#xff0c;例如 loading、error 和 success。 作者使用了多个 useState 钩子来管理这些状态&#xff0c;这导致代码难以阅读且容易出错&#xff0c;例如&#xff1a…