सामग्री को धक्का देने से तुलनात्मक रूप से स्थित div को रोकना

मैं तुलनात्मक रूप से स्थित div को निम्न सामग्री को दबाए रखने से कैसे रोक सकता हूं? निम्नलिखित उदाहरण में मैं एक बड़े लाल रंग के ऊपर एक छोटा हरा div प्रदर्शित करने की कोशिश कर रहा हूं लेकिन हरे रंग के div प्रकट होने पर अगला लाल div नीचे धक्का दिया जाता है।सामग्री को धक्का देने से तुलनात्मक रूप से स्थित div को रोकना

यदि ऐसा करने का एक बेहतर तरीका है, तो मैं सुझावों की सराहना करता हूं। http://jsfiddle.net/38Rqh/

<html> 
<head> 
<style type="text/css" media="screen"> 

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: relative; 
    top: -50px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
} 

.bottom:hover + div { 
    display: block; 
} 

</style> 
</head> 
<body> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

</body> 
</html>

स्रोत

2012-11-08 user1810414

relative अभी भी स्थान लेता है। आपको क्या चाहिए absolute। एक संभावना है कि .bottom तत्वों को position: relative पर सेट करें और फिर .top तत्वों को उनके भीतर रखें और उन्हें बिल्कुल सही रखें।

http://jsfiddle.net/38Rqh/1/

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: absolute; 
    top: 150px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
    position: relative; 
} 

.bottom:hover .top { 
    display: block; 
}

<div class="bottom"> 
<div class="top">Displaying data</div> 
</div> 

<div class="bottom"> 
<div class="top">Displaying data</div> 
</div>

इस तरह, .top तत्वों को उनके युक्त .bottom के संबंध में तैनात किया जाएगा।

.top पर छिपाने के लिए .top पर छिपाने का अतिरिक्त लाभ है, जिससे आप अपने उदाहरण में झिलमिलाहट देखते हैं।

स्रोत

2012-11-08 20:25:49

बहुत बहुत धन्यवाद, यह आश्चर्यजनक रूप से काम करता है। – user1810414

मैं क्या कहां प्रकट हो जाना चाहिए, लेकिन आवरण divs और सापेक्ष स्थिति के बजाय पूर्ण उपयोग करते हुए अतिरिक्त स्थान से छुटकारा मिल जाएगा के साथ इस मिश्रित हो सकता है:

यहाँ एक चल उदाहरण है।

<html> 
<head> 
<style type="text/css" media="screen"> 

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: absolute; 
    bottom: 50px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
} 

.bottom:hover + .top { 
    display: block; 
} 

.wrapper { position: relative; } 

</style> 
</head> 
<body> 

<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
</body> 
</html>

स्रोत

2012-11-08 20:21:24 gotohales

अच्छा पकड़ जेम्स, मैं उसके कोड की सिफारिश करता हूं। – gotohales

धन्यवाद। मैं इसकी सराहना करता हूं। – user1810414

सामग्री को धक्का देने से तुलनात्मक रूप से स्थित div को रोकना

उत्तर

संबंधित मुद्दे