有一个父 div 和子 div。在子 div 元素中使用相对定位来放置其内容。父 div 元素边框未包围子 div 元素。尝试了溢出:父 div 元素中的隐藏和填充选项，但它不起作用。 http://jsfiddle.net/p5UMA/1/粘贴下面的代码
<html>
<head>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#parid{
color:#000000;
border: 3px solid #336c2b;
width: 960px;
margin: 0 auto;
}
#childcon{
background-color: #000000;
color:#ffffff;
border: 5px solid #003748;
position:relative;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="parid">
<div id="childcon">
child contents
</div>
</div>
</body>
</html>
最佳答案
引用自dev.opera
The thing to remember about relative positioning is that it’s only the generated box that is shifted. The element still remains where it was in the static document flow. That’s where it “takes up space” as far as other elements are concerned. This means that the shifted box may end up overlapping other elements’ boxes, because they still act like the relatively positioned element has remained where it should be, before the positioning was applied.
使用 margin 代替
#childcon{
background-color: #000000;
color:#ffffff;
border: 5px solid #003748;
position:relative;
margin-left:100px;
margin-top:100px;
}
例如，增加子元素height会导致父元素height也增加，它只是移动了子元素，但文字元素 >位置保持在原来的位置...
关于css div父边框相对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19970063/