这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战

relative AND absolute 小结

从学前端开始，relative和absolute就成了我的老大难。而且总是在自己觉得已经弄清楚的情况下，一旦涉及稍微复杂的案例就又全部弄混淆。这几天在复习前端的知识，觉得差不多弄懂了一些，在此做一个小结

元素定位

==static relative absolute fixed==

非 static 元素可以用 top left bottom right 属性来设置坐标
relative 是相对定位[相对于本来的位置]
absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到 relative 的元素 ==[脱离了整个结构]==
fixed 基于 window 的绝对定位, 不随页面滚动改变 ==[也脱离了整个结构]==

在此主要讲 relative和absolute （只贴最主要的代码）

1、一个简单的案例

// html 
	<h1 class="relative"> Welcome <span> YWJ </span>relative！</h1>
    <h1 class="absolute"> Welcome <span> YWJ </span>absolute！</h1>

// css

.absolute, .relative {
    text-align: center;
    height:30px;
    padding: 20px;
    font-size: 30px;
}

.relative {
    color:pink;
    background: lightblue;
}

.absolute {
    color:yellow;
    background: blue;
}

.absolute span {
    color:black;
    font-size:15px;
    position: absolute;
}

 .relative span {
     color:black;
     font-size: 15px;
     position: relative;
 }

在这里插入图片描述这里将其他地方除颜色外全部设成一致。而把span一个设置成relative，一个设置成absolute。由分析可知，absolute的span由于绝对定位脱离了整个结构，因此后面的元素应该会当它不存在将其覆盖掉而relative中的span由于是相对定位，是相对原先的自己，因此仍在结构中占有自己的那部分位置，其后的元素不会对它造成影响 ==效果如下== 在这里插入图片描述

relative与absolute组合使用

对前面HTML、css复习中遇到的例子也有了一定的解释：在这里插入图片描述 1.当父元素是relative时，由于占着自己的位置，块状元素便各自成行 2.当子元素是absolute时，由于absolute是相对于最近的relative- [x] 写错！是非static。如果父级是absolute，同样是相对于父级的absolute来定位。因此设置bottom：0时其实就是相当于那张女生图片使bottom为0，而absolute是脱离结构，即字体显示在了图片上的最下方 ==代码如下==