CSS：如何放置的div互相

Z时代
2024-01-10
分类：问答

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

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

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

他父母的宽度没有给出

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

我该怎么做？

回答：

的关键在于使用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/

回答：

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

回答：

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