html - css - 被父元素剪裁的后代子元素

Question

在this WordPress 网站，我正在尝试获取:

<section id="content"> 

_正文框

重叠其父级的顶部边界

<div id="container">

当我添加 top:-200px 时对于该部分的样式，它被上面的图片剪裁了。防止剪裁的唯一方法是编辑祖先 <div id="wrapper">通过从中删除:

overflow-x: hidden

但这也删除了白色背景。我需要无剪裁+有背景，但只能得到剪裁+背景，或者无剪裁+无背景。

这是我的网站:http://biztest.netai.net

如果登录网站有帮助，我可以向您发送登录信息。

Answer 1

您好，您可以这样操作:

• 在该部分设置top:-200px。

• 移除包装器上的overflow-x:hidden。

问题来了:

Why the white background is been removed?

因为你没有使用 clear float 部分之后的方法，然后容器和包装器似乎具有 height:0。您可以在之前的修改之后将其添加到您的 CSS 中:

#container:after {
  content: " ";
  display: block;
  clear: both;
}

使用 DeveloperTools 进行修改后的屏幕截图: