Question

我需要在aside标记中显示三组信息，如果信息太长，我想要展开textarea。每次我展开第一个textarea时，文本和textarea下面都会跟随它。我想让textarea翻阅文本，并在其下面textarea。我尝试了它的位置relative但是没有用。以下是代码示例：

https://jsfiddle.net/07em8L7s/

    <aside id="info">
        <div class="font">
        <div class="header">Aside</u></div>
        <b>Header 1:</b><br> 
        <textarea disabled style="background-color: white; max-height:160px; max-width:295px; position: relative;" cols="35" rows="3">info</textarea><br>   
        <b>Header 2:</b><br> 
        info<br>
        <b>Header 3:</b><br>
        <textarea disabled style="background-color: white; max-height:160px; max-width:295px;" cols="35" rows="3">info</textarea><br>
        </div>
    </aside>

Answer 1

position: relative不会从文档的normal flow中删除元素。换句话说，相对定位的元素仍会影响布局中的其他元素。

您需要使用position: absolute。这会从正常流中移除元素，而其他元素甚至不会识别它的存在。

当您绝对定位textarea时，您可能会注意到相邻元素突然消失。这是因为其他元素占据了空间，绝对定位的元素在从流中移除之前占据了空间。相邻元素位于textarea。

之后

您需要使用left，right，top和bottom属性来移动定位元素。

但最重要的是，当你绝对定位textarea时，它会在展开框时影响周围的元素。

演示：https://jsfiddle.net/07em8L7s/3/

还有两个注释：

您可能需要使用z-index property来确定定位元素的堆叠顺序。
绝对定位的元素相对于最近的定位祖先定位。如果没有定位祖先，则使用body元素。

Answer 2

如果您仍在寻找其他答案，请在此处查看我的小提琴：https://jsfiddle.net/07em8L7s/4/

我的解决方案是将textarea包装在具有相对位置的div中，并将textarea分配给绝对位置。

.textarea-wrapper { position: relative; max-height: 72px; }
.textarea-wrapper textarea {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 60px;
  max-height: 160px;
  padding: 5px;
  border: 1px solid #ddd;
}

您将看到包装器将具有最大高度值，因此当您调整textarea的高度时，包装器不会溢出。希望它有所帮助！

如何在不移动相邻元素的情况下扩展textarea

2 个答案: