css - 我无法获得与网站其余部分相关的 div 位置

Question

我遇到了一些奇怪的事情。可能这很简单，但我的 CSS 知识到此为止。

在深色部分，带有文本的中间部分与网站的其余部分无关。我知道这与作为与另一个 div 相关的 div 有关。我试过了，但没有用。

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

这是圆 Angular 部分的css部分，奇怪的是我可以将阴影部分放在圆 Angular 容器中并且阴影与圆 Angular 部分相关。

我也试过将上面的 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

您有一个带有 id="wrap-header" 的 div，它使用 margin: 0 auto ...这意味着它将水平居中。它也有 position: relative 和很多里面有 position: absolute 的东西。这意味着 wrap-header 中的内容根据 wrap-header 所在的位置进行定位，并且 wrap-header 的位置更改因为窗口因居中而调整大小。

但是你的带有文本的黑框，带有 id=rounded-corners 的 div 在所有这些东西之外，所以它的位置不会随着窗口大小而改变。因此，几乎所有尺寸的窗口都会定位错误。

要么摆脱 wrap-header 上的 margin:0 auto，要么将更多内容移出 wrap-header(其中很多内容没有意义，也许您放错了关闭的 div 标签？)或将圆 Angular 向上移动到 wrap-header 内部，以便它与其余部分一起重新定位。