स्थिति एक और div के लिए एक div रिश्तेदार जो अपनी मूल सीएसएस

Question

का उपयोग नहीं है मैं स्थिति अपनी मूल करने के लिए एक div रिश्तेदार position:relative और position:absolute चाल के बारे में पता कर रहा हूँ। लेकिन क्या होगा यदि div अपने माता-पिता नहीं है और मैं इसे इसके सापेक्ष स्थिति में रखना चाहता हूं? मैं उन पंक्तियों के साथ कुछ लागू करने की कोशिश कर रहा हूं।

मुझे div को ठीक करने के लिए position:fixed के बारे में भी पता है लेकिन मैं एक उत्तरदायी वेबसाइट बना रहा हूं और मैं इससे बचना चाहता हूं। मुझे यहां एक प्रश्न मिला जो इसे करने के लिए jQuery का उपयोग करने का उल्लेख करता है: How to position one element relative to another with jQuery? क्या jQuery ऐसा करने का एकमात्र तरीका है? क्या यह सीएसएस का उपयोग करके भी किया जा सकता है?

मैंने यहां एक पहेली डाली है: http://jsfiddle.net/19bdpgsf/। बेला में, मैं स्थिति notparentdiv को child2 तत्व रिश्तेदार जैसे यह parent div के अनुसार किस स्थिति की गई है कोशिश कर रहा हूँ। क्या यह केवल सीएसएस का उपयोग कर संभव है?

धन्यवाद।

Answer 1

है कि मैं वहाँ jQuery के अलावा कोई अन्य रास्ता नहीं है नहीं लगता है की तुलना में

आप पूर्ण स्थिति (पृष्ठ के पूरे शरीर के सापेक्ष) इस्तेमाल कर सकते हैं, लेकिन अन्य।

Answer 2

एक और तरीका है अगर तुम न सीएसएस पदों jQuery के रूप में नीचे ऑफसेट का उपयोग का उपयोग करने के div

var nonparent = $('.notParent'); 
 
var position = nonparent.offset(); 
 
$('.child1').offset({ 
 
    top: position.top, 
 
    left: position.left 
 
});

.notParent { 
 
    background-color: red; 
 
    padding: 20px; 
 
} 
 
.child2 { 
 
    background-color: yellow; 
 
} 
 
.child1 { 
 
    background-color: green; 
 
} 
 
.parent { 
 
    background-color: purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="notParent"> 
 
    not parent div 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="parent"> 
 
    parent 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>

स्थिति आप किसी अन्य div जो के रूप में पूर्ण सापेक्ष स्थिति के साथ माता-पिता नहीं है अंदर एक div स्थित कर सकते हैं चाहता हूँ

.notParent { 
 
    background-color: red; 
 
    position: relative; 
 
} 
 
.child2 { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 10px; 
 
} 
 
.child1 { 
 
    background-color: green; 
 
    top: 30px; 
 
} 
 
.parent { 
 
    background-color: purple; 
 
}

<div class="notParent"> 
 
    not parent div 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="parent"> 
 
    parent 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>