绝对定位的div中嵌套绝对定位的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

<style>

#selector {

    border : 3px solid red;

    position : relative;

    width : 10px;

    height : 10px;

    z-index:2;

}

#image {

position : absolute;

    width:3px; 

    height:3px; 

    bottom:-3px;

    right:-3px;

    background-color:black;

    border-color:white;

    border-width : 1px;

    border-style: solid;

z-index:1000; 


}

</style>

</head>

<body>

<div id="selector">

    <div id="image">

     </div>

</div>

</body>

</html>

，
为什么嵌套的#image没有相对他的父div定位呢，请帮忙看看啊，但是在里面的div中加一个空白的span即可解决，为什么呢
问题补充：
补充：在firefox下好用，在ie下不好用，#image的宽度和高度设的比较大的话，在ie下也是正确的，但是设的比较小，则有问题
问题补充：
如果是ie渲染的问题，有什么办法能让其正常渲染呢，谢谢

渲什么染啊不要误导

这是ie中行高被字体大小撑开了的原因

在#image 加入font-size:3px;就行了

我不明白你的意思，他怎么会没有相对父DIV定位捏?

他被设置了 position : absolute;
那他必然是相对父元素的绝对定位的。

改成这样你看下效果就明白了：
[code="css"]
#selector {

border : 3px solid red;

position : relative;

width : 100px;

height : 100px;

z-index:2;

}

#image {

position : absolute;

width:30px;

height:30px;

bottom:-30px;

right:-30px;

border-color:black;

border-width : 2px;

border-style: solid;
z-index:1000;

} [/code]

就是里头的div相对于父div 底部在其绝对位置向下30px，右边在其右边30px

Over~

那这个就不是你提的问题了 - -
跟定位其实就没关系了，可能是ie的渲染问题了。