मेरे पास एक div है जिसकी स्थिति इसके div की सापेक्ष स्थिति से फेंक दी गई है। माता-पिता की रिश्तेदार स्थिति को हटाने के दौरान इस मुद्दे को हल किया जाता है, हम इसे समाधान के रूप में लागू नहीं करेंगे क्योंकि यह अन्य सामान तोड़ सकता है। क्या बच्चे को अपने माता-पिता की स्थिति को नजरअंदाज करने के लिए मजबूर करने का कोई तरीका है?क्या किसी विशेष div के माता-पिता div की स्थिति को अनदेखा करने का कोई तरीका है?
उत्तर
दुर्भाग्य से सीएसएस के साथ गतिशील रूप से अपने माता-पिता के रिश्तेदार स्थिति के लिए तत्व "क्षतिपूर्ति" करने का कोई तरीका नहीं है। को छोड़कर लेआउट पुनर्विचार और position:fixed
के बाद क्या आप के बाद कर रहे हैं नहीं है, आपके विकल्प हैं:
- Manuallly माता पिता की स्थिति के लिए क्षतिपूर्ति। बच्चे तत्व
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>
- 1. किसी div की सामग्री को अन्य div
- 2. स्थिति: पूर्ण, div div के तहत div
- 3. विशेष div
- 4. एक विशेष div
- 5. ब्यूटीफुल सूप विशेष div
- 6. एक div की ऊंचाई को किसी अन्य div की ऊंचाई के आधार पर कैसे बनाया जाए?
- 7. "स्थिति: निश्चित" div
- 8. div को किसी अन्य div के अंदर पूर्ण स्थिति में कैसे रखा जाए?
- 9. सीएसएस div शीर्षक स्थिति
- 10. क्या फॉर्म प्रतिक्रिया को अनदेखा करने का कोई तरीका है?
- 11. ड्रैगगेबल div को अन्य div
- 12. फ़्लोटिंग div स्थिति
- 13. div
- 14. क्या div के लिए लंबवत स्क्रॉलबार सेट करने का कोई तरीका है?
- 15. एक div फ्लोट पर रिश्तेदार स्थिति के साथ एक div
- 16. नीचे div की सामग्री को
- 17. क्या किसी भी स्टाइलशीट को अनदेखा करने के लिए HTML तत्व बताने का कोई तरीका है?
- 18. क्या कोई कथन की स्थिति का उपयोग करने के लिए कोई तरीका है?
- 19. क्या किसी विशेष प्रविष्टि के लिए बिबटेक्स शैली फ़ाइल को ओवरराइड करने का कोई तरीका है?
- 20. आंतरिक div का मार्जिन div के मार्जिन
- 21. एक div के अतिप्रवाह पाठ को किसी अन्य div में स्थानांतरित करने के लिए कैसे करें
- 22. DIV: के बाद - DIV
- 23. क्या स्रोत कोड में विशेष चेतावनी को अनदेखा करने के लिए चेकस्टाइल को मजबूर करने का कोई तरीका है?
- 24. div
- 25. div
- 26. क्या सभी पृष्ठ को धुंधला करने और jquery/javascript के साथ कुछ div को फोकस करने का कोई तरीका है?
- 27. जब div div स्क्रीन स्थिति तक पहुंचता है, तो स्क्रू स्थिति
- 28. आईफ्रेम में स्थिति तय div
- 29. स्क्रोल करने योग्य div
- 30. परीक्षण करें यदि किसी div में कोई तत्व नहीं है
किस तरह से माता पिता की स्थिति को अनदेखा करें? 'स्थिति: फिक्स्ड' ऐसा करेगा, लेकिन हो सकता है कि आप उसके बाद न हों। – Jon
मुझे लगता है कि आपको अपने बच्चे div – Ibu
@ जोन के प्लेसमेंट पर पुनर्विचार करना चाहिए, क्योंकि बच्चा div अपने माता-पिता पर कुछ हद तक निर्भर है। मुझे लगता है कि मेरा मतलब है कि माता-पिता की रिश्तेदार स्थिति में जो कुछ भी बदल रहा है उसे अनदेखा करना है - बच्चे के व्यवहार के लिए जैसे माता-पिता के पास स्थिर स्थिति थी। – josh