前端学习---position属性下absolute和relative的关系和区别

最新推荐文章于 2023-05-24 22:16:01 发布

HHH_LLL

最新推荐文章于 2023-05-24 22:16:01 发布

阅读量1k

点赞数

分类专栏：前端学习文章标签： CSS

本文链接：https://blog.csdn.net/HHH_LLL/article/details/88765208

版权

本文探讨CSS中的position属性，重点分析absolute和relative定位的区别。absolute定位元素脱离正常文本流，相对于最近的非static祖先元素定位，可能导致层叠覆盖；而relative定位元素保持在文档流中的原有位置，仅相对于自身位置移动。通过示例展示了当子元素设置为absolute且父元素为relative时，如何影响元素尺寸，以及层叠效果的体现。

摘要由CSDN通过智能技术生成

层定位:position属性

今天下午设计自己个人项目的时候，在编写导航栏时遇到了关于absolute和relative的一些问题。但我们先来介绍一下position属性的各种取值:

position:

取值	描述
static	默认值，没有定位，元素出现在正常的流中 (top,right,bottom,left,z-index无效)
fixed	固定定位，相对于浏览器窗口进行定位 (top,right,bottom,left,z-index有效)
relative	相对定位，相对于其直接父元素进行定位 (top,right,bottom,left,z-index有效)
absolute	绝对定位，相对于static定位以外的第一个父元素进行定位 (top,right,bottom,left,z-index有效)

注：z-index:值越大，越靠近页面顶层。(范围-999~999)

固定定位：

position:fixed:不会随着浏览器窗口的滚动条滚动而变化，总在视线里的元素。（像页面上固定的返回顶部按钮，以及网页两侧广告栏）

相对定位：

position:relative:定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。
【意思是：虽然你的元素已经发生了移动，但是它在原来默认定位中所占的空间（位置）依然存在，不会被其他元素顶替】

绝对定位：

position:absolute:定位为absolute的层（或元素），脱离正常文本流，但与relative有区别的是，其在正常流中的原位置不再存在。
【就是在relative中不可被顶替的位置；在absolute方式下，除了原本的位置会被其他元素顶替上来，现在所处的位置也可以被其他元素层叠覆盖】

下面附上我的个人问题：
源代码：

HTML body部分
<body>
 <div id="index_contain">
  <!-- <video src="video/fczlm.mp4" autoplay preload=auto></video> -->
  <div id="nav">
   <div id="nav_left" class="left"><img src=<