<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:0; padding:0; }
</style>
</head><body><div style="height:20px; position:absolute; left:20px; top:20px; width:500px; background:#000;">
<div style="width:50px; height:50px; position:absolute; left:0; top:10px; background:#F0F;"></div>
</div></body>
</html>
里面的div为什么不相对于body定位呢?能推荐下关于定位的理论知识吗

解决方案 »

  1.   

    绝对定位,他的top,left属性的值,是和它的被定位的父元素进行比较的。
    就说你这个代码的例子
    第一个div的父元素,是body,那么它的定位就是对比这个body的位置的
    但是第二个div,因为它是第一个div的子元素,所以它的定位是相对于第一个div的
    所以,第二个div的左边紧挨着第一个div的左边
    第二个div的顶边,和第一个div的顶边间距为10px。说的有些乱,不知道你能看明白不?可以在W3CSchool看下position的介绍,relative和absolute的区别,以及用法。
      

  2.   

    你能body添加一个position,absolute相对离它最近的设置了position的父节点进行定位,如果一直往上找都没有,就会相对浏览器定位
      

  3.   

    你搜索下position的属性的具体解释就可以了
    问也是把解释复制给你
      

  4.   

    你的那个是相对于父元素定位的  
    反正用的是绝对定位  你不要让两个div为父子关系  设成兄弟关系试试
      

  5.   

    只是不明白它为什么会相对于父元素定位,父元素不是position:relative啊
      

  6.   

    absolute和relative在你说的这个问题上概念一致另外事实就是相对 absolute定位了 为什么要疑惑呢?
      

  7.   

    原来都是以为相对于父元素是postion:relative或者是body定位的,思想上没能迅速接受