绝对定位时溢出

Overflowing on absolute positioning

本文关键字：溢出 定位      更新时间：2023-09-26

好吧，问题来了：

我试图放置两个元素（一个文本区域和一个输入），一个在另一个之上，第一个占据了所有剩余的空间。

元素位于absolute位置。

然而，当我尝试设置left属性（在它们中的任何一个上）时，最右边的部分似乎溢出了。（同样设置right也没有任何帮助）。

HTML:

<div id="the-wrapper">
    <textarea class="form-control"></textarea>
    <input id="search-input" type="text" class="form-control" placeholder="Insert a command &amp; press <Return>" name="cmd-term">
</div>

CSS:

textarea {
  position: absolute; 
  top: 10px; 
  bottom:50px; 
  left: 10px; 
  overflow:visible;
}
input {
  height:34px; 
  position:absolute; 
  bottom:15px; 
  left:10px;
}

代码段：http://www.bootply.com/MAkCQNtiXY

知道发生了什么事吗？

.form-control类将width设置为100%。绝对定位元素的宽度基于其父元素。由于#the-wrapper没有位置，因此宽度将基于body。

您将其设置为100%，但将其放在10px的左侧，具有left属性。

解决方案是重载width属性，用calc值"固定"左偏移：

.form-control {
    width: calc(100% - 10px);
}

http://www.bootply.com/vnEI0vl1d5

相关文章：