Başka bir DIV üzerinde bir DIV Float

Question

Kısa bir süre önce web geliştiricimizin yaptığı bir JS açılır penceresini kopyalama görevine atandım. Ben çok benzer var ama elde edemediğim bir şey var, kapat düğmesi (X) için sağ üst köşede açılan pencerenin üstünde yüzmek (pop-up'ın sağ üst köşesinde oturmak yerine). CSS'de ve Stack overflow çevresinde bulduğum diğer özniteliklerde position: değerleriyle denedim, ancak hiçbiri hile yapmıyor.

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

Sadece bu aradığınız şey olabileceğini düşünüyorum Sınıfınızla .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

Ne hakkında:

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

istenen sonucu bu mu?

Answer 3

kullanın bu 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; 
} 

doğru konumunu ve üst ekleyin.

Answer 5

Bu yazı biraz eski ama burada aynı sorun olan herkes için potansiyel bir çözüm biliyorum:

Birincisi, bunun yerine "gizli" bir "yok" #popup CSS görüntüsünü değiştirecek .

İkincisi, aşağıdaki gibi HTML değiştirecek:

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

Ve aşağıdaki gibi Style için

:

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

ben bu web sitesi (kessitek.com) bu fikrim var. `Float` öğedir gelir: öğeleri konumlandırmak için nasıl çok iyi bir örnek ,: umarım bu yardımcı olur How to position a div on top of another div

,

Zag,