关于relative和absolute属性

来源：互联网发布：mysql sum group by 编辑：程序博客网时间：2024/06/06 19:05

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">一直以来对于position属性中的relative和absolute，多用于如果当前元素position属性为absolute，父级元素为relative，那么当前元素相对于父级元素定位。当父级元素内有padding等CSS属性时，则当前元素的原始点参照父级元素内容区的原始点进行定位。</span>

于是我想，那么子元素的子元素如果想要相对于子元素定位，那么应该怎么写呢。

于是在慕课网上提问，当然身体力行如本宝宝，提问完了顺手去写了个demo实现了一下。

代码如下：

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><style type="text/css">.parent{position: relative;width: 400px;height: 300px;background: red;}.child{position: absolute;top: 0;right: 0;background-color: blue;width: 150px;height: 100px;}.cc{position: absolute;bottom: 0;left: 0;width: 50px;height: 20px;background: yellow;}</style></head><body><div class = "parent">1<div class = "child">2<div class = "cc">3</div></div></div></body></html>

在这段代码中，父子关系为parent - child - cc，parent设置为relative，child和cc设置为absolute，然后结果是这样子的

因此，子元素的子元素要相对于子元素定位时，只需要将position属性设置为absolute就好了。

ok，慕课网有人给回复了，答案如下~

0 0