मेरे पास एक div है जिसकी स्थिति इसके div की सापेक्ष स्थिति से फेंक दी गई है। माता-पिता की रिश्तेदार स्थिति को हटाने के दौरान इस मुद्दे को हल किया जाता है, हम इसे समाधान के रूप में लागू नहीं करेंगे क्योंकि यह अन्य सामान तोड़ सकता है। क्या बच्चे को अपने माता-पिता की स्थिति को नजरअंदाज करने के लिए मजबूर करने का कोई तरीका है?क्या किसी विशेष div के माता-पिता div की स्थिति को अनदेखा करने का कोई तरीका है?
दुर्भाग्य से सीएसएस के साथ गतिशील रूप से अपने माता-पिता के रिश्तेदार स्थिति के लिए तत्व "क्षतिपूर्ति" करने का कोई तरीका नहीं है। को छोड़कर लेआउट पुनर्विचार और position:fixed के बाद क्या आप के बाद कर रहे हैं नहीं है, आपके विकल्प हैं:
position:relative और माता-पिता के पास बिल्कुल विपरीत है (आपको सटीक मानों में फिर से कुंजी की आवश्यकता होगी)। न्यूनतम झगड़ा, लेकिन अब आपको मैन्युअल रूप से सिंक में ऑफसेट (माता-पिता और बच्चे के लिए) के दो जोड़े रखना याद रखना होगा। एक टिप्पणी देकर "अगर आप इसे बदलते हैं तो आपको #THAT को भी बदलना होगा" मदद करेगा।सब कुछ में, मैं # 2 से # 1 करने की अनुशंसा करता हूं, और केवल तभी सबसे अच्छा समाधान (लेआउट बदलना) आपके लिए उपलब्ध नहीं है।
ठीक है, आपने जावास्क्रिप्ट के साथ 2 कहा। लेकिन शायद आप जावास्क्रिप्ट के साथ कुछ समाधान की सिफारिश कर सकते हैं? उदाहरण के लिए jQuery। धन्यवाद –
@ ПавелИванов: क्या करने के लिए समाधान वास्तव में? यदि आपको दिमाग में एक विशिष्ट समस्या है तो अपने आप से कोई सवाल क्यों न पूछें? :-) – Jon
यदि "स्थिर" में "रिश्तेदार" को बदलना आपके लिए एक विकल्प नहीं है ... मैं जॉन से सहमत हूं, आपको बच्चे div को स्थानांतरित करने के लिए जावास्क्रिप्ट का उपयोग करना होगा, और यहां विकल्प 2 करने के लिए जावास्क्रिप्ट का उपयोग करके एक कोड है उसके जवाब है, जहां मैं एक असली सभी रिश्तेदार माता पिता की स्थिति पर विचार करने के लिए osition बच्चे को ले जाने के:
var div = document.getElementById("banner");
var parentDiv = document.getElementById("banner");
var posT = 0;
var posL = 0;
while(parentDiv = parentDiv.offsetParent){
posT += parentDiv.offsetTop;
posL += parentDiv.offsetLeft;
}
posT -= div.offsetTop;
posL -= div.offsetLeft;
div.style.top = (-1)*posT+"px";
div.style.left = (-1)*posL+"px";\t .corpo{
\t
\t \t position:relative;
\t \t margin-left:100px;
\t \t margin_top:100px;
\t \t background-color:yellow;
border:#ccc 1px solid;
padding:10px;
\t
\t }
\t #banner{
\t
\t \t position:absolute;
top:250px; /* inicial value - goal position considering the document reference */
left:150px; /* inicial value - goal position considering the document reference */
\t width:50px;
\t \t height:50px;
\t \t background-color:blue;
font-size:9px;
color:white;
font-family:Arial;
\t }asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
<div class="corpo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
\t <div id="banner" >
<strong>Banner</strong><br/>
top: 250px<br/>
left:150px
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</div>
किस तरह से माता पिता की स्थिति को अनदेखा करें? 'स्थिति: फिक्स्ड' ऐसा करेगा, लेकिन हो सकता है कि आप उसके बाद न हों। – Jon
मुझे लगता है कि आपको अपने बच्चे div – Ibu
@ जोन के प्लेसमेंट पर पुनर्विचार करना चाहिए, क्योंकि बच्चा div अपने माता-पिता पर कुछ हद तक निर्भर है। मुझे लगता है कि मेरा मतलब है कि माता-पिता की रिश्तेदार स्थिति में जो कुछ भी बदल रहा है उसे अनदेखा करना है - बच्चे के व्यवहार के लिए जैसे माता-पिता के पास स्थिर स्थिति थी। – josh