Html 如何显示被其父元素遮挡的子元素';s溢出:隐藏样式设置

Html 如何显示被其父元素遮挡的子元素';s溢出:隐藏样式设置,html,css,Html,Css,我有一个相当奇怪的情况,我想知道它是否有可能克服 我有一个具有固定维度的HTML块元素,它的样式也是“overflow:hidden”。我想定位一个div,它是这个元素的嵌套子元素,位于某个偏移量处。子div的维度与其父div相同。因为父级是“溢出:隐藏”的,所以每当溢出其边界时,它都会剪辑子div。有没有办法通过一些智能CSS技巧来防止这种剪辑 <div style="background-color:RED; width:100px; height:100px; overflow: h

我有一个相当奇怪的情况,我想知道它是否有可能克服

我有一个具有固定维度的HTML块元素,它的样式也是“
overflow:hidden
”。我想定位一个div,它是这个元素的嵌套子元素,位于某个偏移量处。子div的维度与其父div相同。因为父级是“溢出:隐藏”的,所以每当溢出其边界时,它都会剪辑子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关系。将子对象定位为“位置:固定”也不是一个选项


下面是显示问题的示例。

不,正是
溢出:隐藏的定义,即元素剪辑其内容,不允许这样做。您必须选择已列出的选项之一


您也可以克隆子元素并将其放置在与原始元素完全相同的位置,但对于包含许多元素的页面或子元素必须移动或以其他方式更改且克隆必须跟上原始元素的场景,这可能不可行。

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

您也可以克隆子元素,并将其放置在与原始元素完全相同的位置,但对于包含许多元素的页面或子元素必须移动或以其他方式更改且克隆必须跟上原始元素的场景,这可能不可行。

您有两个想法:

  • 实验溢出:initial属性。我不知道您有什么具体的布局,但是initial会将css值设置为它的默认值,即使另一个规则层叠在它上面。请参见此示例:。警告:不友好

  • 看看使用clearfix是否仍能满足您的约束条件。下面是两个例子

  • 给你两个想法:

  • 实验溢出:initial属性。我不知道您有什么具体的布局,但是initial会将css值设置为它的默认值,即使另一个规则层叠在它上面。请参见此示例:。警告:不友好

  • 看看使用clearfix是否仍能满足您的约束条件。下面是两个例子


  • 请检查此项。我已经从父级
    div
    中删除了
    position:relative
    。您能提供一些关于限制您的约束的更多信息吗?在不知道为什么必须强制约束的情况下,我们不能推荐任何技巧来解决您的问题。@SyncCircles:)谢谢,但不幸的是,这也不是一个选项,因为父元素也已定位。@turing\u机器元素标记由页面上的脚本转换为菜单系统。元素的继承权转换为菜单和子菜单。如果其中一个元素的样式为“overflow:scroll”,则在右下角显示其子菜单项将成为一项挑战。请检查此项。我已经从父级
    div
    中删除了
    position:relative
    。您能提供一些关于限制您的约束的更多信息吗?在不知道为什么必须强制约束的情况下,我们不能推荐任何技巧来解决您的问题。@SyncCircles:)谢谢,但不幸的是,这也不是一个选项,因为父元素也已定位。@turing\u机器元素标记由页面上的脚本转换为菜单系统。元素的继承权转换为菜单和子菜单。如果一个元素的样式是“溢出:滚动”,在右下角显示它的子菜单项就成了一个挑战。克隆是一个好主意,我也考虑过了,如果没有效果,克隆可能是唯一的选择。克隆是一个好主意,我也考虑过了,如果没有效果,克隆可能是剩下的唯一选择。