將DIV浮在另一個DIV上

我最近被分配了複製我們以前的Web開發人員製作的JS彈出窗口的工作。我已經知道它非常相似，但有一件事我無法得到，因爲關閉按鈕（X）在右上角的彈出框上浮動（而不是坐在彈出框的右上角）。我已經嘗試過在CSS中使用position:值，以及我在堆棧溢出時發現的其他屬性，但似乎沒有任何技巧。將DIV浮在另一個DIV上

的CSS：

#popup { 
    position:absolute; 
    display:hidden; 
    top:50%; 
    left:50%; 
    width:400px; 
    height:586px; 
    margin-top:-263px; 
    margin-left:-200px; 
    background-color:#fff; 
    z-index:2; 
    padding:5px; 
} 
#overlay-back { 
    position : fixed; 
    top : 0; 
    left : 0; 
    width : 100%; 
    height : 100%; 
    background : #000; 
    opacity : 0.7; 
    filter : alpha(opacity=60); 
    z-index : 1; 
    display: none; 
} 
.close-image { 
    display: block; 
    float:right; 
    cursor: pointer; 
    z-index:3 
}

的HTML：

<div id="overlay-back"></div> 
<div id="popup"> 
    <img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span> 
</div>

來源

2013-07-15 Brad Adams

只需添加位置，右，上到類.close-image

.close-image { 
    cursor: pointer; 
    display: block; 
    float: right; 
    z-index: 3; 
    position: absolute; /*newly added*/ 
    right: 5px; /*newly added*/ 
    top: 5px;/*newly added*/ 
}

來源

2013-07-15 11:13:25

我不認爲這是有道理的：'float'意味着產品不是「塊」而是「內聯塊」。另外，'position：absolute'和'float'不會在一起。您編寫它的順序使其工作，因爲CSS使用最後的條目，但它仍然沒有意義... –

什麼：

.close-image{ 
    display:block; 
    cursor:pointer; 
    z-index:3; 
    position:absolute; 
    top:0; 
    right:0; 
}

是，理想的結果？

來源

2013-07-15 11:07:35

使用此CSS

.close-image { 
    cursor: pointer; 
    z-index: 3; 
    right: 5px; 
    top: 5px; 
    position: absolute; 
}

來源

2013-07-15 11:07:43

.close-image { 
    cursor: pointer; 
    display: block; 
    float: right; 
    position: relative; 
    top: 22px; 
    z-index: 1; 
}

我認爲這可能是你在找什麼。

來源

2013-07-15 11:30:09 noob

我知道這個帖子是有點老，但這裏是一個任何潛在的解決方案誰擁有了同樣的問題：

首先，我會改變CSS顯示器#popup爲「無」，而不是「潛伏」。

其次，我會改變HTML如下：

<div id="overlay-back"></div> 
<div id="popup"> 
    <div style="position: relative;"> 
     <img class="close-image" src="images/closebtn.png" /> 
     <span><img src="images/load_sign.png" width="400" height="566" /></span> 
    </div>    
</div>

而對於風格如下：

.close-image 
{ 
    display: block; 
    float: right; 
    cursor: pointer; 
    z-index: 3; 
    position: absolute; 
    right: 0; 
    top: 0; 
}

我有這個想法從本網站（kessitek.com）。如何定位元素一個很好的例子，：

How to position a div on top of another div

我希望這有助於

字形，

來源

2017-07-13 02:05:41 zag

將DIV浮在另一個DIV上

回答

相關問題