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互相

回答

相關問題