显示错误消息而不移动位于其下的元素

Question

目标是在不移动元素的情况下添加文本错误消息4.是否可以使用css或javascript？

Answer 1

向文档流添加元素时，会占用一些空间，导致其下方的内容向下移动。为防止这种情况发生，您基本上有两种选择：

1. 让元素远离流程。有多种方法可以实现此目标，其中一种可能是position: absolute。
2. 即使不可见，也要让元素占用所需的空间。您可以将元素保留在流中，但可以使用opacity: 0或visibility: hidden隐藏它。这样，它所需的空间已经在流程中保留。

Answer 2

position:absolute或否定margin

＆＃13;

＆＃13;

div{
  height:24px;
  margin:10px 10px 0;
  border:1px solid;
}
.somethinglarger{
  margin-top:40px;
  height:36px;
}
.error{
  margin-bottom:-36px; /* 24px-height, 10px-margin top, 2px-border*/
}
.error2{
  position:absolute;
  
}
.col{
  width:30%;
  height:auto;
  float:left;
  margin:0;
}

＆＃13;

<div class="col">
<div class="somethinglarger">
  Content 1
</div>
<div>
  Content 2
</div>
<div>
  Content 3
</div>
<!--div class="error">
  Error message
</div-->
<div class="somethinglarger">
  Content 4
</div>
</div>
<div class="col">
<div class="somethinglarger">
  Content 1
</div>
<div>
  Content 2
</div>
<div>
  Content 3
</div>
<div class="error">
  Error message
</div>
<div class="somethinglarger">
  Content 4
</div>
</div>
<div class="col">
<div class="somethinglarger">
  Content 1
</div>
<div>
  Content 2
</div>
<div>
  Content 3
</div>
<div class="error2">
  Error message
</div>
<div class="somethinglarger">
  Content 4
</div>
</div>

＆＃13;

＆＃13;

＆＃13;