【web前端自动化工作环境配置】3.CSS中的绝对定位与相对定位

以你之姓@ 2022-08-21 09:45 178阅读 0赞

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

![2012072618164674.jpg][]

为改变参照物（橘色框）后的效果  
层级关系为：  
<div ——————————— position:relative;最近的祖先定位元素，参照物  
<div—————————-没有设置为定位元素，不是参照物  
<div———————-没有设置为定位元素，不是参照物  
<div box1  
<div box2 ——–position:absolute; top:50px; left:120px;  
<div box3  
效果图：

![2012072618180663.jpg][]

参照物为最顶级的元素情况。  
层级关系为：  
<div ———————————没有设置为定位元素，不是参照物  
<div—————————-没有设置为定位元素，不是参照物  
<div———————-没有设置为定位元素，不是参照物  
<div box1  
<div box2 ——–position:absolute; top:50px; left:120px;  
<div box3  
效果图：

![2012072618185065.jpg][]

仅使用margin属性布局绝对定位元素的情况  
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。    
图9中，使用margin属性布局相对定位元素。  
层级关系为：  
<div ——————————— position:relative; 不是参照物  
<div—————————-没有设置为定位元素，不是参照物  
<div———————-没有设置为定位元素，不是参照物  
<div box1  
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;  
<div box3  
效果图：

![2012072618431998.jpg][]

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。  
层级关系为：  
<div ——————————— position:relative; 不是参照物  
<div—————————-没有设置为定位元素，不是参照物  
<div———————-没有设置为定位元素，不是参照物  
<div box1  
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;  
<div box3  
效果图：

![2012072618451464.jpg][]

[2012072618164674.jpg]: /images/20220724/d11d506392b34f639eb1494d0ece0942.png
[2012072618180663.jpg]: /images/20220724/fbf0b8238ddd4fdcae8799550d83820f.png
[2012072618185065.jpg]: /images/20220724/76171cfa11124487a924984a352bcc29.png
[2012072618431998.jpg]: /images/20220724/ca61b6d9ab5944cf9660be9ebc4d1915.png
[2012072618451464.jpg]: /images/20220724/c14699a10e6b4edf85aaaefedda471d9.png