CSS：如何放置的div互相

的顶部看看这个Fiddle CSS：如何放置的div互相

我试图把股利#popup在页面的底部，任何过去的内容和

重叠有他父母的宽度（#content）
他父母的宽度没有给出

我不知道，但余吨hink position: absolute在这种情况下不起作用，至少不是我实施它的方式。

我该怎么做？

来源

2016-12-21 jonhue

'position：fixed;底部：0;宽度：100％;' – TheValyreanGroup

我的答案在你的代码中工作。 –

的关键在于使用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（默认值为位置）的容器，如此处所述https://developer.mozilla.org/en-US/docs/Web/CSS/position

绝对定位的元素相对于最近定位的祖先（非静态）进行定位。如果定位的祖先不存在，则使用最初的容器。

对于说明性指南使用相对定位内绝对定位，检查出https://css-tricks.com/absolute-positioning-inside-relative-positioning/

来源

2016-12-21 22:13:42 JeremyE

谢谢你，真的帮了我很多！ – jonhue

附加给你的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/

来源

2016-12-21 21:32:45

位置绝对是必要的，当你想从父母采取的宽度。由于位置：绝对元素相对于其第一个定位的（非静态的）祖先元素进行定位。你也希望那个容器弹出来，这将通过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"> 
 
\t var myCodeMirror = CodeMirror(document.body, { 
 
    \t 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>

来源

2016-12-21 21:40:24 Payal2299

尝试在.popup

而对于#content使用z-index: 1

jsfiddle

Example使用z-index: 2

来源

2016-12-22 00:05:47

你能检查我的答案吗？ –

CSS：如何放置的div互相

回答

相关问题