保持絕對定位元素在Bootstrap模態體內

如何獲得絕對定位的元素以保持在引導模態模態體元素的範圍內？在我下面的例子，它是出了含有莫代爾體DIV界：保持絕對定位元素在Bootstrap模態體內

.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> 
 

 
\t <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 
 
\t \t <div id="1" class="node">ABSOLUTELY</div> 
 

 

 
\t </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 --

來源

2016-04-27 user210757

將'position：relative;'添加到'.modal-body'並將您的節點至少放置一個邊（否則它的行爲與posion相對）。 –

'最小高度：180px'。什麼決定'.node'的高度？這是一個圖像，文字，都是？ –

@PrzemysławMelnarowicz - bootstrap的模態體已經具有相對位置：但是爲了清晰起見，我添加了相同的結果。 – user210757

確保父元素具有的relative，fixed或absolute一個position。基本上，除了默認的position: static之外。

從那裏你可以使用像left: 20px或任何適合您的需求的東西。

來源

2016-04-27 21:25:09 Pytth

它確實 - bootstrap的模態體具有position：relative，但我會將其添加到問題的清晰度 – user210757

絕對定位的元素將從文檔流中完全刪除。你需要將它從'position：absolute'改爲'relative'，或者你需要有一個隱藏的同級元素，它的高度與你的'position：absolute' div相同，以便將包含的元素「詭計」爲如你所需要的那樣高。 – Pytth

保持絕對定位元素在Bootstrap模態體內

回答

相關問題