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，实际上网页有时不止这些，可能上百，这里只是为了方便显示
六、小结
- 相对定位作为绝对定位的父一级元素出现，给绝对定位作为参照物
- 相对定位：以自己作为参照物
绝对定位：以父一级元素作为参照物 - 相对定位和浮动
将两者的特点结合，进行浮动和偏移 - 绝对定位和浮动
绝对定位：忽略绝对定位所占用的位置
浮动：绕过浮动所占用的位置
智能推荐
前端开发之vue-grid-layout的使用和实例-程序员宅基地
文章浏览阅读1.1w次，点赞7次，收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout
Power Apps-上传附件控件_powerapps点击按钮上传附件-程序员宅基地
文章浏览阅读218次。然后连接一个数据源，就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里，就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件
C++ 面向对象（Object-Oriented）的特征 & 构造函数& 析构函数_"object(cnofd[\"ofdrender\"])十条"-程序员宅基地
文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"
修改node_modules源码，并保存，使用patch-package打补丁，git提交代码后，所有人可以用到修改后的_修改 node_modules-程序员宅基地
文章浏览阅读133次。删除node_modules，重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules
【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure-程序员宅基地
文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure
整理5个优秀的微信小程序开源项目_微信小程序开源模板-程序员宅基地
文章浏览阅读1w次，点赞13次，收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板
随便推点
Centos7最简搭建NFS服务器_centos7 搭建nfs server-程序员宅基地
文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server
Springboot整合Mybatis-Plus使用总结(mybatis 坑补充)_mybaitis-plus ruledataobjectattributemapper' and '-程序员宅基地
文章浏览阅读1.2k次，点赞2次，收藏3次。前言mybatis在持久层框架中还是比较火的，一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库，很是灵活。但正其操作都要通过SQL语句进行，就必须写大量的xml文件，很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d
EECE 1080C / Programming for ECESummer 2022 Laboratory 4: Global Functions Practice_eece1080c-程序员宅基地
文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c
洛谷p4777 【模板】扩展中国剩余定理-程序员宅基地
文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学，wtcl。设要求的数为\(x\)。设当前处理到第\(k\)个同余式，设\(M = LCM ^ {k - 1} _ {i - 1}\) ，前\(k - 1\)个的通解就是\(x + i * M\)。那么其实第\(k\)个来说，其实就是求一个\(y\)使得\(x + y * M ≡ a_k(mod b_k)\)转化一下就是\(y * M ...
android 退出应用没有走ondestory方法,[Android基础论]为何Activity退出之后，系统没有调用onDestroy方法？...-程序员宅基地
文章浏览阅读1.3k次。首先，问题是如何出现的？晚上复查代码，发现一个activity没有调用自己的ondestroy方法我表示非常的费解，于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy
SylixOS快问快答_select函数 导致堆栈溢出 sylixos-程序员宅基地
文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何 您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数 导致堆栈溢出 sylixos