css 相对位置不适用于按钮放置

soat7uwm 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(140)

我有一个按钮，这是刚刚低于文本区，有另一个按钮，就在文本区上方，由于某种原因，我不能改变顶部按钮的位置，但在屏幕上，我希望按钮aobe屏幕应该除了按钮的第二个按钮是，我已经能够把它，但当我在文本区键入的东西，文本区的大小调整了一点，按钮的位置被移动，我用css移动的按钮不会移动，停留在那里，它与textarea重叠。
我在这里尝试的是，如果第二个按钮移动了一点，另一个按钮也应该随之移动
这是我CSS和HTML

#ApprBtn {
  position: relative;
  top: 175px;
  left: 200px;
}

<form name="form0">
  <table>
    <tr>
      <td valign="top">
        <Input Type="Submit" id="ApprBtn" class="ui-button ui-corner-all ui-widget" Value="Approve">
      </td>
    </tr>
  </table>
</form>

<form name="form1">
  <table>
    <tr>
      <td>
        <textarea class="textareaW" name="Reason" id="Reason" cols="100" rows="5" wrap="Virtual"></textarea>
      </td>
      <tr>
        <td valign="top">
          <Input Type="Submit" id="RejectBtn" class="ui-button ui-corner-all ui-widget" Value="Reject">
        </td>
      </tr>
  </table>
</form>

当我开始在textarea和textarea增长了一点，拒绝按钮一直下降，但批准按钮停留在同一个地方，我怎么能移动批准btn也随着拒绝按钮，这件事现在简直要了我的命

css

来源：https://stackoverflow.com/questions/75620379/position-relative-is-not-properly-working-for-a-button-placement

1条答案

按热度按时间

toe950271#

正如评论中的人已经写过的，定位只对那些有共同父元素的元素有影响。
我假设由于某种原因您不能重构HTML，但是如果这两个表单有一个 Package div，也许类似这样的东西可以为您工作。

.form-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.form-wrapper form,
.form-wrapper table,
.form-wrapper tbody,
.form-wrapper tr,
.form-wrapper td {
  display: contents;
}

.form-wrapper input {
  display: block;
  width: fit-content;
  margin-top: 10px;
}

#ApprBtn {
  order: 3;
}

<div class="form-wrapper">
<form name="form0">
  <table>
    <tr>
      <td valign="top">
        <Input Type="Submit" id="ApprBtn" class="ui-button ui-corner-all ui-widget" Value="Approve">
      </td>
    </tr>
  </table>
</form>

<form name="form1">
  <table>
    <tr>
      <td>
        <textarea class="textareaW" name="Reason" id="Reason" cols="100" rows="5" wrap="Virtual"></textarea>
      </td>
      <tr>
        <td valign="top">
          <Input Type="Submit" id="RejectBtn" class="ui-button ui-corner-all ui-widget" Value="Reject">
        </td>
      </tr>
  </table>
</form>
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

css 相对位置不适用于按钮放置

1条答案

相关问题

热门标签

最新问答