別のDIVの上にDIVを浮かべて

Question

私は最近私たちの以前のWeb開発者が作ったJSポップアップをコピーする仕事を割り当てられました。私はそれに非常に似ているが、私が得ることができない1つのことがあります。閉じるボタン（X）が右上隅のポップアップの上に浮かぶ（ポップアップの右上隅に座るのではなく）。私はposition: CSSの値と私はスタックオーバーフローの周りに発見した他の属性で試したが、まだ誰もそのトリックを行うようです。

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> 

Answer 1

はちょうど私が、これはあなたが探しているものかもしれないと思う.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*/ 
} 

Answer 2

何について：

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

が望ましい結果ということですか？

Answer 3

使用このCSS

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

Answer 4

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

あなたのクラスに右、上、位置を追加します。

Answer 5

私はこのポストは少し古いですが、ここで同じ問題がある人のための潜在的な解決策である知っている：

まず、私が「なし」の代わりに「非表示」に#popupのためのCSSの表示を変更します。

第二に、私は次のように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

私はこれが役に立てば幸い、

ザグ、