Question

我有一个相当奇怪的场景，我想知道是否有可能克服。

我有一个固定尺寸的HTML块元素，其样式也是“overflow:hidden”。我想在一个偏移处定位一个div，它是此元素的嵌套子元素。子div与其父级具有相同的维度。由于父级是“overflow：hidden”，因此只要溢出其边界，它就会剪切子div。有没有办法用一些智能的CSS技巧来阻止这种剪辑？

<div style="background-color:RED; width:100px; height:100px; overflow: hidden; position: relative;">
    <!-- Notice the child is 100 x 100 px and is clipped by the parent's overflow:hidden; styling-->
    <div style="background-color:BLUE; width:100px; height:100px; position: absolute; top: 70px;left: 70px; z-index: 1000;"></div>
</div>

我受到某些约束的限制，不能松开父级的"overflow:hidden;"设置或破坏两个元素之间的父子DOM关系。将孩子定位为“职位：固定”也不是一种选择。

以下是显示问题的link to JSFiddle。

Answer 1

不，overflow: hidden的定义，即元素剪辑其内容，不允许这样做。您必须选择列出的其中一个选项。

您也可以克隆子元素并将其定位，使其与原始元素位于完全相同的位置，但对于具有许多元素或子元素必须移动的场景的页面或否则改变，克隆必须跟上原件，这可能是不可行的。

Answer 2

两个想法：

尝试使用overflow：initial属性。我不知道你有什么具体的布局，但是初始会将css值设置为默认值，即使另一个规则是级联的。请参阅此示例：http://www.w3schools.com/cssref/css_initial.asp。警告：不友好。
查看使用clearfix是否仍能满足您的约束条件。下面发布了两个例子。

What is a clearfix?

Make child visible outside an overflow:hidden parent

如何显示被其父级溢出遮挡的子元素：隐藏样式设置

2 个答案: