一篇文章带你了解CSS定位知识 css定位的理解
lipiwang 2024-10-19 08:19 29 浏览 0 评论
大家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS定位。
一、Position(定位)
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
二、属性
1. Static 定位（默认效果）
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
2. Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<head>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> 代码使人进步！！！.</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</body>
</html>注意：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
3. Relative 定位
相对定位元素的定位是相对其正常位置。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title> 定位</title>
<head>
<style>
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body style="background-color:azure;">
<p>Some more text</p>
<p><b>Note:</b> 代码使人进步！！！.</p>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
</body>
</html>可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
h2.pos_top{
position:relative;
top:-50px;
}相对定位元素经常被用来作为绝对定位元素的容器块。
4. Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2{
position:absolute;
left:100px;
top:150px;
}Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。
三、重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
四、总结
本文基于Html基础，主要介绍了CSS中四种定位的方式。对于四种的定位表现形式，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。
最后，希望可以帮助大家更好的学习CSS3。
相关推荐
- 想减少Windows 11内存占用?请取消固定Teams
-
如果你想要提高Windows11系统的运行速度，那么可以禁用某些默认启用的功能和设置。如果你的Windows11是安装在已经停止支持的设备或者内存容量不高的旧设备，那么应该立即限制或禁用固...
- Windows查看端口占用、查看PID对应的进程、并终止进程
-
Windows下：查看端口占用netstat-ano|findstr"端口号"获取到pid查看PID对应的进程tasklist|findstr"进程ID"...
- 计算机组成原理(36): 分时之一——进程
-
建立一个虚拟机VM目标：给每个程序一个自己的虚拟机“VirtualMachine”，程序并不知道其他的虚拟机。1.1进程（Process)为了捕获正在运行的程序，我们创建一个称为“进程（Proce...
- window系统如何停止端口被占用的进程(高手版)
-
如上图1，作为开发人员是不是经常遇到这个问题？（Webserverfailedtostart.Port9527wasalreadyinuse.）当然，如果在你知道确实有某个进程正占...
- 电脑的文件无法删除咋回事?你需要这款神兵利器
-
很多朋友用电脑的时候，都遇到过文件无法删除的情况。这往往是由于文件被某个软件、进程所调用所引发的——在Windows中，某个文件如果被使用，这个文件可能就没法进行删除、重命名之类的操作了。想要进一步操...
- Windows日志分析（windows 日志文件）
-
1.Windows日志文件简介1.1Windows日志核心分类1.系统日志系统日志包含由Windows系统组件记录的事件，记录系统进程和设备驱动程序的活动。由它审核的系统事件包括启动失败的设备驱动程...
- 电脑软件崩溃、闪退不用慌!DJS Tech 教你几招轻松解决
-
当你正全神贯注用电脑处理重要文件、沉浸在精彩的游戏世界，或是观看喜欢的视频时，软件突然崩溃、闪退，那一刻的烦躁简直难以言喻。别着急，DJSTech作为深耕计算机领域多年的专业团队，为你带来一系列超...
- 微软Win11推进淘汰控制面板，时间服务器配置迁移至设置应用
-
IT之家5月29日消息，科技媒体Winaero昨日（5月28日）发布博文，报道称微软在Windows11系统中，继续推进“淘汰控制面板”进程，配置时间服务器地址选项迁移到设置应...
- 微软 PowerToys更新，可帮你找出 Win11上哪些进程正在占用该文件
-
IT之家11月3日消息，微软针对Windows11和Windows10的PowerToys已经更新到了最新的0.64.0版本，并上线了一个名为“文件锁匠FileLock...
- Windows基础操作 认识任务管理器（windows任务管理器的使用）
-
Windows基础操作：认识任务管理器任务管理器（TaskManager）是Windows系统中一个功能强大的实用工具，它为用户提供了实时监控系统资源、管理正在运行的程序和服务的能力。掌握任务管理器...
- windows——netstat过滤(终止进程)
-
windows——netstat过滤(终止进程)在Windows操作系统中，使用netstat命令可以查看网络连接的状态。要过滤特定协议或端口的连接，可以使用以下命令：查看所有连接：netstat-...
- 只要这么做 Windows Defender与第三方就能和平共存啦
-
无论大家是否喜欢WindowsDefender，伴随着Windows10的不断升级，它已经成为系统的底层必备组件之一。虽然我们有各种各样的方法去关闭它，换用顺手的第三方，但只要更新打补丁，噩梦就来...
- Win10如何彻底关闭wsappx进程（win10 wsappx怎么关闭）
-
win10如何彻底关闭wsappx进程？wsappx进程是什么？wsappx进程是Windows10系统的一部分，这个进程是WindowsStore和微软通用应用程序平台（UWP）的依赖进程。...
- Windows环境黑客入侵应急与排查（黑客入侵电脑原理）
-
1文件分析1.1临时目录排查黑客往往可能将病毒放在临时目录（tmp/temp），或者将病毒相关文件释放到临时目录，因此需要检查临时目录是否存在异常文件。假设系统盘在C盘，则通常情况下的临时目录如下...
- Windows 11 24H2 KB5044384出现大面积安装失败、任务管理器0进程等问题
-
Windows11KB5044384更新由于出现大量错误而无法在Windows1124H2上安装、其中包括一个奇怪的错误，即由于0x800f0922、0x800736b3和0x8...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)