Question

有父div和子div。在子div元素中使用相对定位来放置它的内容。 parent div元素border不包含子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>

Answer 1

引自dev.opera

关于相对定位要记住的事情是它只是生成的盒子被移动了。元素仍然保持原样在静态文档流程中。这就是它“占据空间”的地方与其他因素有关。这意味着移动的盒子可以最终重叠其他元素的盒子，因为它们仍然像相对定位的元素保留在应有的位置，在定位之前。

使用margin代替

Demo

#childcon{
   background-color: #000000;
   color:#ffffff;
   border: 5px solid #003748;
   position:relative;
   margin-left:100px;
   margin-top:100px;
}

例如，增加子元素height将导致增加父元素的height，它只是移动子元素，但文字元素position保留在它的位置是...

Demo 2

Answer 2

这可能会帮助你

#childcon{
 background-color: #000000;
 color:#ffffff;
 border: 5px solid #003748;
 margin:100px 0 0 100px;
}

Answer 3

<div id="parid">
        <div id="childcon">
                child contents
        </div>
         <div style="clear:both;"></div>
     </div>

#childcon{
background-color: #000000;
color:#ffffff;
border: 5px solid #003748;
position:relative;
margin:100px 0 0 100px;

请参阅此链接http://jsfiddle.net/bipin_kumar/p5UMA/16/

css div父边界相对定位

3 个答案: