子div能不能相对于父div绝对定位啊？如何定位？求帮忙，急急急急急急急急急急急
父div设置的是居中的，它的子div能不能根据父div的位置而定位，而不是根据body或者显示器边界定位；就是说：能不能设置子div在父div里面距离父div左边100p...
父div设置的是居中的，它的子div能不能根据父div的位置而定位，而不是根据body或者显示器边界定位；
就是说：能不能设置子div在父div里面距离父div左边100px，无论显示器分辨率怎么变子div一直在父div左边的100px处。
或者给出下图的css样式或者是完整的html代码，谢谢。谢谢 展开
就是说：能不能设置子div在父div里面距离父div左边100px，无论显示器分辨率怎么变子div一直在父div左边的100px处。
或者给出下图的css样式或者是完整的html代码，谢谢。谢谢 展开
5个回答
展开全部
<div style="width:500px; height:500px; border:solid 1px #900;">
<div style="width:100px; height:100px; background-color:#900; position:absolute; z-index:11; margin-top:10px; margin-left:10px;">1</div>
<div style="width:100px; height:100px; background-color:#090; position:absolute; z-index:12; margin-top:120px; margin-left:10px;">2</div>
<div style="width:100px; height:100px; background-color:#009; position:absolute; z-index:13; margin-top:10px; margin-left:120px;">3</div>
<div style="width:100px; height:100px; background-color:#990; position:absolute; z-index:14; margin-top:120px; margin-left:120px;">4</div>
</div>
要用margin-left,margin-right,margin-right,margin-bottom属性，而不是直接用top,left,right,bottom这些属性，前者是对父元素的，后者是对整个窗体的。还有z-index的值必须是不一样的，如果是一样的的话，那就表示它们在同一层面上，会相互拥挤。
仅供参考！呵呵
<div style="width:100px; height:100px; background-color:#900; position:absolute; z-index:11; margin-top:10px; margin-left:10px;">1</div>
<div style="width:100px; height:100px; background-color:#090; position:absolute; z-index:12; margin-top:120px; margin-left:10px;">2</div>
<div style="width:100px; height:100px; background-color:#009; position:absolute; z-index:13; margin-top:10px; margin-left:120px;">3</div>
<div style="width:100px; height:100px; background-color:#990; position:absolute; z-index:14; margin-top:120px; margin-left:120px;">4</div>
</div>
要用margin-left,margin-right,margin-right,margin-bottom属性，而不是直接用top,left,right,bottom这些属性，前者是对父元素的，后者是对整个窗体的。还有z-index的值必须是不一样的，如果是一样的的话，那就表示它们在同一层面上，会相互拥挤。
仅供参考！呵呵
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
#fu{
background-color:#CCCCCC;
width:80%;
margin:0 auto;
position:relative;
border:1px solid #000000;
height:600px;
}
#zi1,#zi2,#zi3,#zi4{
border:1px solid #CCCCCC;
width:200px;
height:200px;
position:absolute;
background-color:#FFFFFF;
}
#zi1{
top:80px;
left:100px;
}
#zi2{
top:80px;
right:150px;
}
#zi3{
left:100px;
bottom:60px;
}
#zi4{
right:150px;
bottom:60px;
}
</style>
<div id="fu">
<div id="zi1">
子层1
</div>
<div id="zi2">
子层2
</div>
<div id="zi3">
子层3
</div>
<div id="zi4">
子层4
</div>
</div>
#fu{
background-color:#CCCCCC;
width:80%;
margin:0 auto;
position:relative;
border:1px solid #000000;
height:600px;
}
#zi1,#zi2,#zi3,#zi4{
border:1px solid #CCCCCC;
width:200px;
height:200px;
position:absolute;
background-color:#FFFFFF;
}
#zi1{
top:80px;
left:100px;
}
#zi2{
top:80px;
right:150px;
}
#zi3{
left:100px;
bottom:60px;
}
#zi4{
right:150px;
bottom:60px;
}
</style>
<div id="fu">
<div id="zi1">
子层1
</div>
<div id="zi2">
子层2
</div>
<div id="zi3">
子层3
</div>
<div id="zi4">
子层4
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
修改父div样式的padding属性即可：
padding-top:80px;
padding-left:100px;
padding-right:150px;
padding-bottom:60px;
padding-top:80px;
padding-left:100px;
padding-right:150px;
padding-bottom:60px;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
父级元素使用相对定位，position:relative; 这样子元素的绝对定位才会以父元素做为定位对象。
绝对定位的对象，别忘记设定z-index来表示层级。
绝对定位的对象，别忘记设定z-index来表示层级。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果用position来定位你的页面，父级元素的position属性必须为相对定位（relative），定位于其内部的某个元素，最好用绝对定位（absolute）,这样，它就不受父级元素的padding值的影响。下面给段代码，供参考：
<!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=gb2312" />
<title>网页中css定位的问题</title>
<style type="text/css">
*{margin:0;padding:0;}
#wrapper{width:800px;height:600px;margin:0 auto;position:relative;background:#f00;}/*相对定位position:relative;都以它为参照.*/
#one,#two,#three,#four{width:180px;height:180px;background:#ccc;}
#one{position:absolute;left:100px;top:80px;}/*绝对定位position:absolute;，设置left和top */
#two{position:absolute;right:150px;top:80px;}/*绝对定位position:absolute;，设置right和top */
#three{position:absolute;left:100px;bottom:60px}/*绝对定位position:absolute;，设置left和bottom */
#four{position:absolute;right:150px;bottom:60px;}/*绝对定位position:absolute;，设置right和bottom */
</style>
</head>
<body>
<div id="wrapper">
<div id="one">111区域</div>
<div id="two">222区域</div>
<div id="three">333区域</div>
<div id="four">444区域</div>
</div>
</body>
</html>
<!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=gb2312" />
<title>网页中css定位的问题</title>
<style type="text/css">
*{margin:0;padding:0;}
#wrapper{width:800px;height:600px;margin:0 auto;position:relative;background:#f00;}/*相对定位position:relative;都以它为参照.*/
#one,#two,#three,#four{width:180px;height:180px;background:#ccc;}
#one{position:absolute;left:100px;top:80px;}/*绝对定位position:absolute;，设置left和top */
#two{position:absolute;right:150px;top:80px;}/*绝对定位position:absolute;，设置right和top */
#three{position:absolute;left:100px;bottom:60px}/*绝对定位position:absolute;，设置left和bottom */
#four{position:absolute;right:150px;bottom:60px;}/*绝对定位position:absolute;，设置right和bottom */
</style>
</head>
<body>
<div id="wrapper">
<div id="one">111区域</div>
<div id="two">222区域</div>
<div id="three">333区域</div>
<div id="four">444区域</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
