<div id="parent" style="overflow:hidden; position:relative;">
  <div id="child" style="position:absolute;">
  </div>
</div>

我需要显示比父元素大的子元素,但不移除溢出:隐藏;这可能吗?

(元素定义了额外的CSS,我只是将样式属性放在这里是为了清楚起见)

推荐答案

在家长div上同时使用overflow: hiddenposition: relative是完全不可能的.取而代之的是,您可以引入一个额外的子项div,并将overflow: hidden移至该子项.

见:http://jsfiddle.net/thirtydot/TFTnU/

HTML:

<div id="parent">
    <div id="hideOverflow">
        <div style="width:1000px;background:#ccc">sdfsd</div>
    </div>
  <div id="child">overflow "visible"</div>
</div>

CSS:

#parent {
    position:relative;
    background:red;
    width:100px;
    height:100px
}
#child {
    position:absolute;
    background:#f0f;
    width:300px;
    bottom: 0;
    left: 0
}
#hideOverflow {
    overflow: hidden
}

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px
}

#child {
  position: absolute;
  background: #f0f;
  width: 300px;
  bottom: 0;
  left: 0
}

#hideOverflow {
  overflow: hidden
}
<div id="parent">
  <div id="hideOverflow">
    <div style="width:1000px;background:#ccc">sdfsd</div>
  </div>
  <div id="child">overflow "visible"</div>
</div>

Css相关问答推荐

如何在CSS calc()中使用反向百分比/无单位计算?

如何获得特定位置的Divs以根据浏览器宽度正确调整大小

下一个js app样式刷新页面后不工作页面

如何将bslib::card()中的扩展按钮移到右上方,其中full_screen = TRUE?

Safari CSS扫描动画效果不起作用

更改MAT-FORM-FIELD的CSS,使其在有Angular 的HTML中显示为普通文本框

如果一个类紧挨着另一个具有特定类的元素,请使用特殊的CSS,只使用不带JS的CSS

显示 P 元素中加载数据的空行

为什么 :focus 会覆盖 :focus-visible ?

如何在Bootstrap 5上使用移动设备居中内容?

如何使用来自单独模块的代码将自定义标头插入到使用 DT Shiny 呈现的表中?

动态覆盖 Vuetify 类

有人可以解释为什么我的 CSS 转换如此突然吗?

BootStrap:右对齐嵌套手风琴

如何在每一行周围放置不同大小的阴影?

修复导航栏隐藏页面内容

如何填充 100% 的剩余高度?

如何从标题中删除粗体?

在移动网络上禁用捏zoom

如何复制 iOS 上固定的后台附件