将绝对定位的元素保留在 Bootstrap 模态体内

Posted 2023-03-06

【中文标题】将绝对定位的元素保留在 Bootstrap 模态体内

【英文标题】：Keep absolutely positioned element inside of Bootstrap modal body

【发布时间】：2016-08-22 10:04:48

【问题描述】：

我如何让一个绝对定位的元素保持在引导模式模态体元素的范围内？在下面的示例中，它超出了包含 modal-body div 的范围：

.node 
   width: 300px;
   min-height: 180px;
   position:absolute;
   margin:5px;
   border:3px solid black;
   background-color: blue;

.modal-body 
   position: relative;
   border: 2px solid green;
   background-color: black;
   color: white;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="show-modal" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

	<div id="myModal"  class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>

      <div class="modal-body">
        MODAL BODY
		<div id="1" class="node">ABSOLUTELY</div>


	</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal --

【问题讨论】：

将 position: relative; 添加到 .modal-body 并将您的节点定位在至少一侧（否则它将表现得像相对定位）。

min-height: 180px。什么决定了.node的高度？是图片还是文字？

@Przemysław Melnarowicz - bootstrap 的模态体已经有 position: relative，但为了清楚起见，我添加了问题 - 结果相同。

@Joseph Marikle - 只是文字

@user210757 是的。除非你能合理地预测纵横比，否则这在 CSS 中是不可能的。当然，您也可以绑定到引导程序的模态事件以判断模态何时打开并计算绝对定位元素的高度。从那里您可以明确设置高度。

【参考方案1】：

确保父元素具有relative、fixed 或absolute 中的position。基本上，除了默认的 position: static 之外的任何东西。

从那里您可以使用 left: 20px 之类的东西或任何适合您需要的东西来定位它。

【讨论】：

确实如此 - bootstrap 的 modal-body 有 position: relative，但为了清楚起见，我会将其添加到问题中

绝对定位的元素会从文档流中完全移除。您需要将其从 position: absolute 更改为 relative 或者您需要有一个与您的 position: absolute div 具有相同高度的隐藏兄弟元素来“欺骗”包含元素，使其与您需要的一样高它是。