css div родительская граница относительное позиционирование

Имейте родительский div и дочерний div. Использование относительного позиционирования в дочернем элементе div для размещения его содержимого. граница родительского элемента div не включает дочерний элемент div. Пробовал переполнение: скрытые и дополнительные параметры в родительском элементе div, но он не работает. http://jsfiddle.net/p5UMA/1/ вставили код нижеcss div родительская граница относительное позиционирование

<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>

источник

2013-11-14 Arav

думать о стоимости, то есть «по отношению ко мне» для элемента имеет позицию «относительно». – jason

Цитирование из 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

источник

2013-11-14 05:24:02

Да, также подумайте о значении как о значении «по отношению ко мне», поскольку элемент имеет позицию «относительный» – jason

Большое спасибо за информацию. – Arav

@Arav Вы приветствуете :) –

Это может помочь вам

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

источник

2013-11-14 05:25:14

Большое спасибо за информацию. – Arav

<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-14 06:28:33

Большое спасибо за информацию – Arav

Прошу проголосовать за меня. –

css div родительская граница относительное позиционирование

ответ

Смежные вопросы