Dreamweaver 里position: relative;问题
上面一个div设置了position: relative;top: -20px;
下面一个DIV就会和上面一个空出20PX对吗？如果是 这个怎么解决呢？
给定位的东西找个爸爸
position: relative;相对定位
-----------------------------------------------------
相对定位占据文档流，就是说定位的东西位移了，在它本该出现的位置浏览器还是会渲染出一个占位的框框！
position:absolute;绝对定位
-----------------------------------------------------
据对定位是将元素从原来的位置拖出来，不占据文档流，在原来位置不会留下占位框。但是绝对定位在窗口大小不同、分辨率不同时会出现错位。
正确的方法：相对定位嵌套绝对定位，这样绝对定位的元素总是对应它的父元素的位置，在不同分辨率下不会错位：
--------------------------------------------
<父元素，相对定位>
<子元素,绝对定位></子元素>
</父元素>
--------------------------------------------
例子(div是父级、img是子元素)：
<div id="myid">
<img src="mypic.jpg" />
</div>
css:
-------------------------------------
#myid{
width:200px;height:100px;
background:red;
position:relative;/*父级相对定位*/
}
#myid img{
/*图片是div的子级，给他绝对定位*/
position:absolute;left:-25px;
}
position: relative;相对定位
-----------------------------------------------------
相对定位占据文档流，就是说定位的东西位移了，在它本该出现的位置浏览器还是会渲染出一个占位的框框！
position:absolute;绝对定位
-----------------------------------------------------
据对定位是将元素从原来的位置拖出来，不占据文档流，在原来位置不会留下占位框。但是绝对定位在窗口大小不同、分辨率不同时会出现错位。
正确的方法：相对定位嵌套绝对定位，这样绝对定位的元素总是对应它的父元素的位置，在不同分辨率下不会错位：
--------------------------------------------
<父元素，相对定位>
<子元素,绝对定位></子元素>
</父元素>
--------------------------------------------
例子(div是父级、img是子元素)：
<div id="myid">
<img src="mypic.jpg" />
</div>
css:
-------------------------------------
#myid{
width:200px;height:100px;
background:red;
position:relative;/*父级相对定位*/
}
#myid img{
/*图片是div的子级，给他绝对定位*/
position:absolute;left:-25px;
}
温馨提示：答案为网友推荐，仅供参考
第1个回答 2012-01-06
是可以的。但是，前提是这两个DIV在同一个窗口中，且不能浮动。
以下是和结果图
<html >
<head>
<title>无标题文档</title>
<style type="text/css">
#id1{
width:200px;height:100px;
background:red;
position:relative;/*父级相对定位*/
top: -20px;
}
#id2 {
background-color: #009933;
}
</style>
</head>
<body>
<div id="id1">ggg
</div>
<div id="id2">ggg
</div>
</body>
</html>
相似回答