CSS网页布局教程:绝对定位和相对定位

以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。

本文是网页教学www.webjx.com收集整理或者原创内容，转载请注明出处！

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

图6

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

图7

图8中，参照物为最顶级的元素情况。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
  <div—————————-没有设置为

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!