在内部div元素中更改父div的CSS属性

Question

我有一个父div，我的CSS中的overflow属性被定义为隐藏。

然而，包含在父div中的子div并且我将子div相对于我的父div定位为绝对，并使用top：something来显示在页面顶部。

然而，子div在页面上不可见，因为parent div的overflow属性设置为hidden。

它看起来像这样

<div id="parent">
<div id="child">
</div>
</div>

CSS

#parent {
overflow: hidden;
}

#child {
position: absolute;
top: -290px;
left: 0px;
bottom: auto;
z-index: 1;
visibility: visible;
}

如果不将父div的overflow属性设置为可见，如何使子div可见。

Answer 1

简单回答，你不能。

如果你在父母身上设置overflow:hidden，它会对任何溢出进行设置，所以不要显示孩子。

无论如何，如果父div与视口的顶部对齐，因为孩子有top:-290px，因为它在浏览器窗口的可视空间之外呈现（即290px），所以不会显示它在它开始之前）。

您可能需要考虑您要完成的工作以及原因。

为了在父级的定义边界之外正确显示子内容，请考虑给父级固定高度/宽度（可选）的位置为relative。孩子应该完全位于此范围内，但可以置于其极限之外。只要在父项上设置overflow:hidden，它就会显示，并且子项的位置仍在浏览器视口中。

有关示例

，请参阅此FIDDLE

Answer 2

溢出：隐藏;隐藏儿童div的实际原因并非如此。最小化top: -290px; to top: 0px;并且子div将可见。

Answer 3

更改顶部：-290px;值。因为它会超出极限。