किसी अन्य डीआईवी

Question

के शीर्ष पर एक डीआईवी फ़्लोट करें मुझे हाल ही में हमारे पिछले वेब डेवलपर द्वारा जेएस पॉपअप की प्रतिलिपि बनाने का काम सौंपा गया था। मुझे यह बहुत ही मिल गया है, फिर भी एक चीज है जो मुझे नहीं मिल सकती है, करीबी बटन (एक्स) को ऊपरी दाएं कोने में पॉपअप पर फ़्लोट करने के लिए (पॉपअप के ऊपरी दाएं कोने पर बैठने के बजाय)। मैंने सीएसएस में position: मानों और स्टैक ओवरफ़्लो के आसपास पाए गए अन्य विशेषताओं के साथ प्रयास किया है, फिर भी कोई भी चाल नहीं कर रहा है।

सीएसएस:

#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

इस सीएसएस उपयोग

.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 के बजाय "छिपा" "कोई नहीं" के लिए सीएसएस प्रदर्शन बदल जाएगा ।

दूसरा, मैं इस प्रकार एचटीएमएल बदल जाएगा:

<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

मुझे आशा है कि इस मदद करता है,

ज़ाग,