html - 如何在 x 而不是 y 上使相对 div 内的绝对定位 div 溢出

标签 html css

我在相对定位的 div 中有一个绝对定位的 div。我希望内部 div 在 x 轴上溢出,但在 y 轴上不溢出。

<html>
<head>
<style>
  #wrapper {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    overflow-y: hidden;
    overflow-x: visible;
  }

  #wrapper div {
    width: 50px;
    height: 50px;
    position: absolute;
    right: -25px;
    bottom: -25px;
    background-color: red;
  }
</style>
</head>
<body>
<div id="wrapper">
<div></div>
</div>
</body>
</html>

我在 IE7、IE8、Firefox3、Chrome 的 x 轴内部 div 中使用滚动条进行裁剪或溢出,这不是我想要的。

我觉得我肯定做错了什么。有什么办法可以满足我的要求吗?

最佳答案

I want the inner div to overflow on the y-axis, but not on the x-axis.

你正在使用 CSS 相反,尝试将这个 css 放在你的内部 div 中:

  #wrapper div {
    ............
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }

还有你的父 div:

  #wrapper {
    ............
    overflow: auto;
  }

关于html - 如何在 x 而不是 y 上使相对 div 内的绝对定位 div 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4116775/

相关文章:

html - 仅在悬停时显示文本

html - 使 div 中的某些单词具有不同的样式会使段落中断真的很奇怪

javascript - 如何使复选框用作多选选项?

html - CSS 无法为棋盘制作动画?

javascript - 简单传记 slider 的点击和不透明度

html - 有没有办法使 2 列布局在两个方向上拉伸(stretch)?

javascript - 关闭模态覆盖时无法隐藏消息框

python - 如何在python plotly dash中使用Font Awesome图标

javascript - 如何使用 javascript 为每个单词设置不同颜色的样式?

javascript - 从响应式菜单中提取移动菜单