CSS：如何將div彼此疊放

Question

看看這個小提琴

我試圖將div #popup在頁面底部，與之前的所有內容重疊，

• 具有他父母的寬度（ #content ）
• 沒有給出他父母的寬度

我不確定，但我認為是這樣的position: absolute在這種情況下不起作用，至少在我實現它的方式上不起作用。

我該怎么做？

Answer 1

對於這樣的彈出窗口，使用position: absolute的關鍵是確保將容器設置為position: relative 。 此外，您將需要設置z-index以確保彈出窗口顯示在內容上方，並使用top屬性設置位置。

為了滿足使彈出窗口成為內容的寬度的要求，您可以設置width: 100%

#content {
  cursor: pointer;
  position: relative;
}
#popup {
  display: none;
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
}

在這里查看更新的小提琴： https : //jsfiddle.net/xsxo0xmd/18/

從技術上講，您可以將position: absolute用於未設置為position : static任何容器position : static （ position : static的默認值），如此處所述https://developer.mozilla.org/zh-CN/docs/Web/CSS/位置

絕對定位的元素相對於最近定位的祖先（非靜態）定位。 如果不存在已定位的祖先，則使用初始容器。

有關在相對定位中使用絕對定位的說明性指南，請訪問https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

將其附加到您的CSS中，用於上述元素：

#popup {
    position: fixed; //this is your friend
    bottom: 0;  //stick to bottom
    z-index: 1; //bring the element in front of other element.
}

我已經為您更新了JSFiddle。

https://jsfiddle.net/xsxo0xmd/15/

Answer 3

需要絕對位置，因為您要從父級獲取寬度。 由於post：absolute，該元素相對於其第一個定位（非靜態）祖先元素定位。 另外，您還希望該容器彈出，這將通過z-index實現。

僅供參考請檢查更新

 $(document).ready(function(){ $('#content').click( function(){ popup = $('#popup'); if (popup.hasClass('show')) { popup.slideUp(250, function() { popup.fadeOut(250).removeClass('show'); }); } else { popup.slideDown(250, function() { popup.fadeIn(250).addClass('show'); }); }; } ); }); 

  .CodeMirror { height: calc(100vh - 25px); width: 100%; } #content { cursor: pointer; background-color:green; } #popup { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: red; z-index: 100; } 

 <script type="text/javascript"> var myCodeMirror = CodeMirror(document.body, { value: "function myScript(){return 100;}", mode: "javascript", lineSeparator: null, theme: "default", // theme directory indentUnit: 2, smartIndent: true, tabSize: 2, indentWithTabs: false, electricChars: true, extraKeys: null, lineWrapping: false, lineNumbers: true, firstLineNumber: 1, scrollbarStyle: "overlay", inputStyle: "contenteditable", readOnly: false, // also "nocursor" showCursorWhenSelecting: false, lineWiseCopyCut: true, undoDepth: 200, historyEventDelay: 1250, autofocus: true }); </script> <div id="content"> ABC <div id="popup"> DEF </div> </div> 

Answer 4

嘗試在.popup上使用z-index: 2

對於#content使用z-index: 1

jsfiddle

例