2

有一个父 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>
4

3 回答 3

2

引自dev.opera

关于相对定位要记住的一点是，只有生成的盒子会被移动。该元素仍然保留在静态文档流中的位置。就其他元素而言，这就是它“占用空间”的地方。这意味着移动后的框最终可能会与其他元素的框重叠，因为在应用定位之前，它们仍然像相对定位的元素保持在应有的位置一样。

margin改为使用

演示

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

例如，增加子元素height也会导致height父元素的增加，它只是移动子元素，但字面量元素position保持在原来的位置......

演示 2

于 2013-11-14T05:24:02.667 回答
0

这可能会帮助你

#childcon{
 background-color: #000000;
 color:#ffffff;
 border: 5px solid #003748;
 margin:100px 0 0 100px;
}
于 2013-11-14T05:25:14.280 回答
0 
<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/

于 2013-11-14T06:28:33.127 回答