超过其他 DIV 的边缘时使按钮被切断答案

【问题标题】：Make buttons cut off when over the edge of other DIV超过其他 DIV 的边缘时使按钮被切断
【发布时间】：2014-11-11 19:44:39
【问题描述】：

我有一个主 DIV，以及该 DIV 中的一些按钮。我希望按钮离开 DIV 的边缘时被切断（就像这里的这张图片，蓝色是主体，浅灰色是 div，深灰色是按钮。）

我该怎么做？

我的 HTML：

<body style="background-color: blue;">
    <div id="container">
        <button style="position: absolute; left:-50px; width:150px; height:50px;">Button</button>
    </div>
</body>

【问题讨论】：

请发布您的 HTML 和 CSS。

标签： html css z-index behind

【解决方案1】：

将下面的 css 添加到您的包装器 div 中

#wrapperDiv{overflow:hidden;}

【讨论】：

【解决方案2】：

根据 Keith 在 cmets 中的建议，只需使用 overflow: hidden;。（参见 sn-p。）

.hide-buttons {
  
  overflow: hidden;
  position: relative;
  height: 100px;
  width: 300px;
  background-color: lightblue;
  margin: 0 auto;

}

.top-button {

    position: absolute;
    min-width: 30%;
    top: 25%;
    left: 35%;

}

.left-button {
  
  position: absolute;
  left: -10px;
  bottom: 20px;
  
}

.right-button {
  
  position: absolute;
  right: -10px;
  bottom: 20px;
  
}

<div>
<div class="hide-buttons">
  
  <input type="button" value="Top Button" class="top-button">
  <input type="button" value="Left Button" class="left-button">
  <input type="button" value="Right Button" class="right-button">
  
</div>  
</div>

【讨论】：