Я не могу получить позицию div, связанную с остальной частью моего сайта

Question

Я делаю что-то странное. Возможно, это легко, но мое ноу-хау CSS здесь останавливается.

В темной части средняя часть с текстом в ней не относится к остальной части сайта. Я знал, что это было связано с тем, чтобы быть div, связанным с другим div. Я пробовал это, но это не работает.

http://www.coldcharlie.nl/test2/

Это часть css для части с закругленными углами, странно то, что я могу поместить теневую часть в контейнер с закругленными углами, а тень связана с частью с закругленными углами.

Я также попытался поместить вышеупомянутый CSS в другой контейнер, но это не сработало и разрушил сайт.

Может кто-нибудь сказать мне, что делать?

.rounded_corners{

background: url(../images/achtergrond_homepage.png); no-repeat left bottom;
display: block;
left: 480px;
top: -730px;
z-index: 100000;
position: relative;
color:#FFF;
padding: 15px;
width: 360px;
height: 440px;

}

<div class="rounded_corners">
        <div><h1> <br />Computerhulp in Friesland </h1>
  </div>
  <p>Is  uw computer stuk? Of werkt uw laptop traag? Met de computerhulp van  Friese Computerservice werkt uw computer of laptop weer snel als  vanouds. <br />
    Friese Computerservice is gevestigd in Leeuwarden, maar is actief in heel Friesland.</p>
  <h2><strong>Goede computerhulp is belangrijk!</strong></h2>
  <p>Een computer of laptop gaat altijd stuk op het moment dat het u niet  uitkomt. Vervelend! Vaak wordt geprobeerd om de storing zelf te  verhelpen. Helaas…. met alle gevolgen dien! Uw computer of laptop is  helemaal niet meer bruikbaar of belangrijke informatie (denk ook aan uw  foto’s!) zijn onvindbaar. Het is dan ook raadzaam om voor reparaties  altijd naar een gespecialiseerd computer reparatiebedrijf te gaan.</p>
  <h2><strong>Ook computerhulp nodig?</strong></h2>
  <p>U wilt weer vertrouwd én snel met uw computer of laptop werken? Neem  dan contact op met Friese Computerservice. Onze kennis is uitstekend,  onze tarieven scherp. Bel of mail ons. Wij helpen u graag!</p>
<div id="shadow"><!--This is the shadow part--></div>
       </div>

Answer 1

У вас есть div с id="wrap-header", который использует margin: 0 auto ... это означает, что он будет центрирован по горизонтали. У него также есть position: relative и много вещей внутри него с position: absolute. Это означает, что материал внутри wrap-header располагается в зависимости от того, где находится wrap-header, и положение wrap-header изменяется при изменении размера окна из-за центрирования.

Однако ваш черный ящик с текстом, div с id=rounded-corners находится вне всего этого материала, поэтому его положение не меняется с размером окна. Следовательно, он будет расположен неправильно почти для каждого размера окна.

Либо избавьтесь от margin:0 auto в заголовке wrap, либо удалите больше содержимого из заголовка wrap (для него не имеет смысла находиться там, возможно, вы не поместили закрывающий div тег?) или переместите закругленные углы до внутреннего wrap-header, чтобы он переместился вместе с остальными.