css定位详解（相对定位、绝对定位和固定定位）_css里有pidding-程序员宅基地

一、什么是定位？

css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、left、bottom、right来调整元素位置

二、各个属性值的作用

属性值	作用	备注
relative	相对定位	参考元素本身
absolute	绝对定位	参考最近的祖先元素
static	静态定位	基本定位规定
fixed	固定定位	参考浏览器窗口

1、相对定位

相对定位的偏移元素参考的是元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留
html代码：
在这里插入图片描述
css代码：

网页效果：

在这里插入图片描述

可以看出相对定位是相对于元素本身来说，其中距离顶部30px，距离左边20px，并且没有脱离文档流

2、绝对定位

绝对定位是相对于已定位的最近的祖先元素，如果的最近的祖先元素没有设置定位，那么它的位置就相对于最初的包含块（body）
css代码：
在这里插入图片描述
网页效果：

可以看到绝对定位脱离文档流，由于父级元素未进行定位，所以是以最初的包含块（body）进行定位，现在将该元素的父级元素进行定位
css代码：
在这里插入图片描述
网页效果：

这里父级元素定位之后，该元素是以父级元素来进行定位

3、静态定位

没有特别的设定，不脱离文档流，遵循基本的定位规定，不能通过z-index进行层次分级
css代码：
在这里插入图片描述
网页效果：

可以看出红色块位置没变，可以知道static（静态，默认属性）通常情况下不会使用，position值一般为默认

4、固定定位

固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动
html代码：

css代码：

网页效果（未设定固定定位）：
在这里插入图片描述
网页效果（设定固定定位）

可以看出进行固定定位后，即使窗口进行滚动，红色块的位置不变

三、相对和绝对定位

将三个色块来区别相对定位和绝对定位
未进行定位时，默认网页效果：
在这里插入图片描述

1、相对定位

css代码：
在这里插入图片描述
网页效果：

可以看出相对定位和默认定位效果是一样的

2、绝对定位

css代码：
在这里插入图片描述
网页效果：

这里红、黄、蓝色块重叠显示了，即脱离文档流

3、相对定位和绝对定位

为了使效果更加明显，这里将红、黄、蓝三色块进行一定程度的偏移

（1）相对定位

css代码：
在这里插入图片描述
网页效果：

（2）绝对定位

css代码：
在这里插入图片描述
网页效果：

四、相对、绝对定位与浮动

绝对定位和浮动都脱离文档流

1、相对定位

css代码：
在这里插入图片描述
网页效果：

2、绝对定位

css代码：
在这里插入图片描述
网页效果：

3、浮动

css代码：
在这里插入图片描述
网页效果：

可以看到浮动（float）为文字包围红色色块，但文本与红色色块的距离过近，无法设定边距

4、相对定位与浮动

css代码：
在这里插入图片描述
网页效果：

相对定位和浮动结合可以设定文本与红色色块的边距

5、绝对定位和浮动

css代码：
在这里插入图片描述
网页效果：

五、z-index的使用

若要将下面的色块中红色色块显示在黄色色块上面，可以使用z-index
在这里插入图片描述
css代码：

网页效果：

可以看到红色色块显示在红色色块上面，这里z-index的数值为40,20,30，实际上网页有时不止这些，可能上百，这里只是为了方便显示

六、小结

相对定位作为绝对定位的父一级元素出现，给绝对定位作为参照物
相对定位：以自己作为参照物
绝对定位：以父一级元素作为参照物
相对定位和浮动
将两者的特点结合，进行浮动和偏移
绝对定位和浮动
绝对定位：忽略绝对定位所占用的位置
浮动：绕过浮动所占用的位置

本文链接：https://blog.csdn.net/qq_38473254/article/details/124774497

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios