Spławik DIV na innym komputerze DIV

Question

Niedawno przydzielono mi zadanie kopiowania wyskakującego okienka JS, utworzonego przez naszego poprzednika. Mam bardzo podobne, ale jest jedna rzecz, której nie mogę uzyskać, ponieważ przycisk zamykania (X) unosi się nad wyskakującym okienkiem w prawym górnym rogu (zamiast siedzieć w prawym górnym rogu wyskakującego okienka). Próbowałem z wartościami position: w CSS i innych atrybutach, które znalazłem w związku z przepełnieniem stosu, ale żaden z nich nie poradził sobie z tym.

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

Wystarczy dodać pozycję, prawej i od góry do klasy .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

Co o:

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

Czy to pożądanego rezultatu?

Answer 3

Użyj tego 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; 
} 

myślę, że to może być to, czego szukasz.

Answer 5

Znam ten post jest trochę stary, ale tutaj jest potencjalnym rozwiązaniem dla każdego, kto ma ten sam problem:

pierwsze, chciałbym zmienić wyświetlanie CSS dla #popup „none” zamiast „ukryte” .

Po drugie, chciałbym zmienić HTML następująco:

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

I do stylu, jak następuje:

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

Mam ten pomysł z tej strony (kessitek.com). Bardzo dobrym przykładem, w jaki sposób pozycjonować elementy ,:

How to position a div on top of another div

Mam nadzieję, że to pomaga,

Zag,