允许绝对定位的孩子在父对象之外进行溢出渲染:隐藏

罗伯特·库兹尼尔(Robert Kusznier)

如何允许绝对定位的元素违反其祖先overflow: hidden并在其外部进行渲染?由于position: relative祖先层次结构中的元素之间存在一个元素,因此情况变得复杂

这是一支在这种情况下,如何允许红色的内部div以其全高(300px)呈现,而不是受最外层父级的150px限制我无法overflow: hidden从元素中删除-我正在使用它来实现折叠面板。我也不能移动position: relative到一个最外层元素的父母-它必须留在外部元素。

Okku

使用以下规则overflow:hidden从中删除并在.outermost其中创建另一个元素:overflow:hidden; height:100%; width:100%; position:absolute; top:0; left:0;并将其他所有内容放入其中,它们不会溢出。

.outermost {
  width: 400px;
  height: 150px;
  background-color: blue;
  position:relative;
}

.outer {
   position: relative;
}

.inner {
  position: absolute;
  left: 100px;
  height: 300px;
  width: 50px;
  background-color: red;
  z-index: 1;
}

.hideOverflow{ /* Put all the content here that's overflowing content you want hidden. And leave content you don't want to hide outside this. */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
<div class="outermost">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
    <div class="hideOverflow">
      <p>Overflowing content inside this element will be hidden.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis imperdiet nisl, sit amet pretium eros rhoncus nec. Vestibulum viverra semper libero, nec commodo felis lobortis vel. Nam eu erat vel neque viverra iaculis. Mauris condimentum consectetur sem vitae semper. Duis bibendum mollis ex, vitae egestas velit. Nam vitae dolor ornare, vestibulum dui et, sollicitudin est. Duis tristique vehicula dolor et condimentum. Maecenas in tristique dolor. Mauris luctus tincidunt sem. Nulla sit amet tincidunt quam. Aenean quis semper enim. Morbi dolor tellus, porta eu feugiat non, pellentesque ac lacus. Nulla facilisi. Mauris suscipit aliquet egestas.</p>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果孩子位置:绝对,而父对象是溢出:隐藏,为什么孩子溢出?

溢出隐藏的div之外的绝对定位的元素

绝对定位的子元素溢出父容器

溢出:绝对定位元素的隐藏

溢出隐藏在绝对定位的SVG上

允许绝对定位的元素比父绝对定位的元素宽

CSS Flexbox:居中的孩子溢出了固定位置的父对象

溢出:隐藏绝对定位的 div 时隐藏不起作用

绝对定位而不扩展父对象

CSS-定位绝对溢出父级,同时可以滚动

绝对定位的 div 溢出相对父级的边界

DropDown 在相对父容器之外定位绝对元素

将绝对元素定位在相对父容器之外

绝对定位时溢出

强制子元素在溢出之外可见:隐藏的父元素

如何确定相对父对象的绝对溢出元素的位置?

如何从当前位置(而不是父对象)定位(偏移)绝对元素?

隐藏菜单并对页面的每个项目进行绝对定位

中心绝对定位溢出div

绝对定位在div之外

停止父级滚动并允许绝对定位的子级与父级重叠

填充设置时相对父级内部的绝对定位溢出div

使用水平滚动使绝对定位的 div 适合内容宽度并溢出父级

溢出隐藏不适用于“垂直对齐的底部” - 绝对定位的外部 div 中的 div

具有隐藏溢出的 flex 布局中的绝对定位按钮(带滚动)

CSS将相对定位div移动到溢出隐藏div之外

绝对定位,忽略父填充

jQuery溢出:隐藏在父级上,检测孩子是否真正可见

当动画向右移动孩子时,父溢出隐藏不起作用