盒子
盒子
文章目录󰁋
  1. 导图总结

绝对定位与相对定位

层级关系为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
```<!--more-->
效果图:

![](http://pic002.cnblogs.com/images/2012/422101/2012072618164674.jpg)

---

为改变参照物(橘色框)后的效果

层级关系为:
```html
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3

效果图:


参照物为最顶级的元素情况。

层级关系为:

1
2
3
4
5
6
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3

效果图:


导图总结

支持一下
扫一扫,支持poetries