CSS：如何将div彼此叠放

Question

Take a look at this Fiddle

I am trying to place the div #popup at the bottom of the page, overlapping any previous content and

• having the width of his parent ( #content )
• the width of his parent is not given

I am not sure, but I think position: absolute does not work in this case, at least not in the way I implemented it.

How would I do that?

Answer 1

The key to using the position: absolute for a popup like this is to ensure that the container is set to position: relative . Additionally, you will need to set the z-index to ensure that the popup is shown above the content and set the location using the top property.

To meet the requirement of having the pop up be the width of the content, you could just set width: 100%

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

See the updated fiddle here: https://jsfiddle.net/xsxo0xmd/18/

Technically, you can use position: absolute with any container that is not set to position : static (the default value for position), as described here https://developer.mozilla.org/en-US/docs/Web/CSS/position

The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static). If a positioned ancestor doesn't exist, the initial container is used.

For an illustrative guide to using absolute positioning inside relative positioning, check out https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

Append this to your CSS for the said element:

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

I've updated the JSFiddle for you.

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

Answer 3

Position absolute is needed, As you want width to be taken from parent. Due to postion:absolute the element is positioned relative to its first positioned (not static) ancestor element. Also you want that container as pop up, which will be achieved through z-index.

FYI Please check updated

 $(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

Try using z-index: 2 on .popup

And for #content use z-index: 1

jsfiddle

Example