माता-पिता की गद्दी की अनदेखी पूर्ण स्थिति

173

आप अपने माता-पिता की गद्दी के लिए एक निरपेक्ष तैनात तत्व का सम्मान कैसे करते हैं? मैं अपने माता-पिता की चौड़ाई में खिंचाव के लिए एक आंतरिक div चाहता हूं और मूल रूप से पाद लेख के रूप में उस माता-पिता के नीचे स्थित होना चाहता हूं। लेकिन बच्चे को माता-पिता की गद्दी का सम्मान करना होगा और वह ऐसा नहीं कर रहा है। बच्चे को माता-पिता के किनारे के ठीक ऊपर दबाया जाता है।

इसलिए मुझे यह चाहिए:

यहां छवि विवरण दर्ज करें

लेकिन मुझे यह मिल रहा है:

यहां छवि विवरण दर्ज करें

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

मैं इसे आंतरिक div के चारों ओर एक मार्जिन के साथ बना सकता हूं, लेकिन मैं इसे जोड़ना नहीं चाहूंगा।

css padding css-position

— d512
स्रोत

5

क्यों आंतरिक div के बाएं / दाएं / नीचे परिवर्तन नहीं style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?

— j08691

12

हाँ, मैंने इसके बारे में सोचा था लेकिन यह जल्दी से एक रखरखाव सिरदर्द बन जाता है क्योंकि हर बच्चे को इसके लिए अपने स्वयं के सेट ऑफसेट रखने पड़ते हैं। यदि वे सिर्फ माता-पिता की गद्दी का सम्मान करेंगे तो आप इसे सिर्फ एक बार माता-पिता में सेट कर सकते हैं और सभी बच्चों की चिंता नहीं कर सकते।

— d512

जैसा कि ऊपर बताया, यदि आप के रूप में (सापेक्ष-तैनात) माता पिता की गद्दी के मूल्य का उपयोग left:और right:(निरपेक्ष-तैनात) बच्चे पर, आपकी समस्या को हल किया जाता है। मैं इस b / c को जोड़ रहा हूँ कि उसी समस्या के साथ अन्य लोगों के उत्तर की तलाश की जा रही है।

— rda3000

यहाँ एक समान मुद्दा है: jsfiddle.net/5n4By/6 । पाद अपने माता-पिता की बाईं गद्दी का सम्मान कर रहा है, लेकिन यह दाईं ओर बहती है। आप इसे सही पैडिंग के सम्मान के साथ-साथ सुसंगत बने रहने की उम्मीद करेंगे ...

— rafiki_rafi

186

पहले, आइए देखें कि यह क्यों हो रहा है।

कारण यह है कि, आश्चर्य की बात है, जब एक बॉक्स में position: absoluteअपना बॉक्स होता है, तो माता-पिता की गद्दी बॉक्स (यानी, उसके पैड के चारों ओर का बॉक्स)। यह आश्चर्य की बात है क्योंकि आमतौर पर (जब स्थिर या सापेक्ष स्थिति का उपयोग करते हुए) युक्त बॉक्स माता-पिता की सामग्री बॉक्स है।

यहाँ सीएसएस विनिर्देश का प्रासंगिक हिस्सा है :

इस मामले में कि पूर्वज एक इनलाइन तत्व है, युक्त ब्लॉक उस तत्व के लिए उत्पन्न पहली और आखिरी इनलाइन बॉक्स के पैडिंग बॉक्स के चारों ओर बाउंडिंग बॉक्स है .... अन्यथा, ब्लॉकिंग ब्लॉक का निर्माण पैडिंग एज द्वारा किया जाता है। पूर्वज।

सबसे आसान तरीका - जैसा कि विंटर के जवाब में सुझाया गया है - padding: inheritबिल्कुल स्थिति पर उपयोग करना है div। यह केवल तभी काम करता है, यदि आप नहीं चाहते हैं कि पूरी तरह divसे अपनी खुद की कोई अतिरिक्त गद्दी हो। मुझे लगता है कि सबसे सामान्य उद्देश्य समाधान (इसमें दोनों तत्वों की अपनी स्वतंत्र पैडिंग हो सकती है):

divपूरी तरह से तैनात के आसपास एक अतिरिक्त अपेक्षाकृत स्थिति (कोई गद्दी के साथ) जोड़ें div। वह नया divअपने माता-पिता की गद्दी का सम्मान करेगा, और पूरी तरह से तैनात divफिर उसे भर देगा।

निश्चित रूप से नकारात्मक पक्ष यह है कि आप HTML के साथ केवल व्यावसायिक उद्देश्यों के लिए गड़बड़ कर रहे हैं।
पूरी तरह से तैनात तत्व पर पैडिंग (या इसे जोड़ें) दोहराएं।

यहाँ नकारात्मक पक्ष यह है कि आपको अपने सीएसएस में मूल्यों को दोहराना होगा, जो कि अगर आप सीधे सीएसएस लिख रहे हैं तो भंगुर है। हालाँकि, यदि आप किसी पूर्व-प्रसंस्करण टूल का उपयोग कर रहे हैं जैसे SASSया LESSआप एक चर का उपयोग करके उस समस्या से बच सकते हैं। यह वह विधि है जिसका मैं व्यक्तिगत रूप से उपयोग करता हूं।

— केविन क्रिस्टोफर हेनरी
स्रोत

यह डिफ़ॉल्ट क्यों है position: absolute? यह आश्चर्य की बात है कि युक्त बॉक्स पैडिंग बॉक्स है, लेकिन इसके लिए एक कारण होना चाहिए था, जैसे मुझे यकीन है कि एक कारण है (बिना box-sizing) widthऔर heightपैडिंग या बॉर्डर शामिल नहीं है।

— कोशिशें

1

बस एक अतिरिक्त: इसका कोई भी प्रभाव box-sizingसंपत्ति पर, माता-पिता या बच्चे पर नहीं पड़ता है । इसका कारण यह है कि चौड़ाई / ऊंचाई के रूप में आकार को प्रभावित करता है , लेकिन युक्त बॉक्स नहीं है, हालांकि मैं मानता हूँ कि अगर यह दोनों को प्रभावित करता है तो अधिक समझ में आएगा।

— कोशिशें

2

यह अच्छी जानकारी है, लेकिन यह गलत जवाब है। सही उत्तर है विंटर का नीचे .... पैडिंग का उपयोग करें: विरासत में मिला है और आपके एब्सोल्यूट एलिमेंट को पेडिंग की जरूरत होगी। पता नहीं क्यों यह सही उत्तर की तुलना में अधिक upvotes है ...: पी

— NotaGuruAtAll

1

@NotaGuruAtAll: padding: inheritअच्छी तरह से काम करता है अगर पूरी तरह से तैनात divअपने स्वयं के किसी भी गद्दी की जरूरत नहीं है, और मैंने उस तकनीक का उल्लेख जोड़ा है। यह कम लचीला है, हालांकि, क्योंकि आप किसी भी अतिरिक्त पैडिंग को पूरी तरह से तैनात divनहीं कर सकते (यानी आप कह नहीं सकते padding: inherit + 5px)। इसलिए मैं यहां बताई गई तकनीकों को पसंद करता हूं।

— केविन क्रिस्टोफर हेनरी

1

position:absoluteयदि आप सिर्फ बच्चे को माता-पिता की गद्दी का सम्मान करने के लिए देख रहे हैं तो बाल तत्व पर पैडिंग विरासत में मिलती है। हालाँकि, यदि आप बच्चे पर अतिरिक्त पैडिंग जोड़ना चाहते हैं तो आपको अपने कोड में पैडिंग के अनुपात को ध्यान में रखना होगा। इसे सीएसएस के साथ करने का कोई साफ तरीका नहीं है।

— डायलन पियर्स

51

एक चीज़ जिसे आप आज़मा सकते हैं, वह निम्नलिखित सीएसएस का उपयोग कर रही है:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

यह बच्चे के तत्व को माता-पिता से विरासत में मिला देता है, फिर बच्चे को माता-पिता की विधवा और गद्दी से मिलान करने के लिए तैनात किया जा सकता है।

इसके अलावा, मैं box-sizing: border-box;इसमें शामिल तत्वों के लिए उपयोग कर रहा हूं ।

मैंने सभी ब्राउज़रों में इसका परीक्षण नहीं किया है, लेकिन लगता है कि यह क्रोम, फ़ायरफ़ॉक्स और IE10 में काम कर रहा है।

— सर्दी
स्रोत

मैंने इस उत्तर और @ नया जवाब को जोड़ दिया। मेरी विशेष मामले में, पूर्ण तैनात div गद्दी अनदेखी रखा लेकिन था अपनी मूल तत्व से घिरा। इसलिए सफ़ेद मोटी सीमाओं के साथ निरपेक्ष स्थिति को देखते हुए मुझे ज़रूरत पड़ी। एक शर्त हालांकि यह है कि आपकी पृष्ठभूमि एक ही रंग की होनी चाहिए।

— ओगियर शेल्विस

लेकिन ओपी नहीं चाहता कि बच्चे को माता-पिता की गद्दी विरासत में मिले। वह चाहता है कि बच्चे को माता-पिता की गद्दी के अनुसार ऑफसेट किया जाए।

— माइकल गुम्मेल्ट

30

खैर, यह सबसे सुरुचिपूर्ण समाधान (शब्दार्थ) नहीं हो सकता है, लेकिन कुछ मामलों में यह बिना किसी कमियां के काम करेगा: पैडिंग के बजाय, मूल तत्व पर एक पारदर्शी सीमा का उपयोग करें। निरपेक्ष तैनात बाल तत्व सीमा का सम्मान करेंगे और इसे बिल्कुल वैसा ही प्रस्तुत किया जाएगा (सिवाय इसके कि आप स्टाइल के लिए मूल तत्व की सीमा का उपयोग कर रहे हैं)।

— NewSpender
स्रोत

8

पैरेंट डिव में पेडिंग के बजाय मार्जिन का उपयोग करें: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

— Niloct
स्रोत

ध्यान रखें कि पृष्ठभूमि (रंग) को हाशिये पर लागू नहीं किया जाता है, जैसे कि पैडिंग में है

— पॉल

6

यहाँ पर मेरा सबसे अच्छा शॉट है। मैंने एक और div जोड़ा और इसे लाल कर दिया और इसे परीक्षण करने के लिए आपने माता-पिता की ऊंचाई को 200px में बदल दिया। विचार यह है कि बच्चा अब पोता बन जाता है और माता-पिता दादा-दादी बन जाते हैं। तो जनक अपने जनक का सम्मान करता है। आशा है कि आपको मेरा विचार मिलेगा।

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

संपादित करें:

मुझे लगता है कि आप जो करने की कोशिश कर रहे हैं वह नहीं किया जा सकता है। निरपेक्ष स्थिति का मतलब है कि आप इसे सह-निर्देश देने जा रहे हैं, इसे सम्मान देना चाहिए। यदि माता-पिता के पास 5px की पैडिंग हो तो क्या होगा। और आप बिल्कुल शीर्ष पर बच्चे को स्थिति देते हैं : -5 पीएक्स; बाएं: -5 पीएक्स । यह एक ही समय में माता-पिता और आपको सम्मानित करने के लिए कैसे माना जाता है ??

मेरा समाधान

यदि आप चाहते हैं कि यह माता-पिता का सम्मान करे, तो यह बिल्कुल स्थिति नहीं है।

— टच
स्रोत

धन्यवाद, मैं पोस्ट की सराहना करता हूं, लेकिन यह अभी भी वास्तविक मुद्दे के लिए एक समाधान है। मैं वास्तव में जानना चाहता हूं कि क्या आप बच्चों को मूल तत्व की पैडिंग के लिए सम्मानित कर सकते हैं। अगर यह पता चला कि जवाब नहीं है, तो मैं आपको इसका जवाब दूंगा।

— d512

यदि आप उन्हें पूर्ण स्थिति में रखते हैं, तो वे अपने मूल तत्व का सम्मान नहीं करेंगे। वे आपको सम्मानित करेंगे। उसी कारण से, यदि आप उन्हें पूरी तरह से स्थिति नहीं देते हैं, तो आप वास्तव में नीचे जैसे सामान का उपयोग नहीं कर सकते हैं : 10px क्योंकि वे अपने मूल तत्व का सम्मान करते हैं। लेकिन आप क्या करना चाहते हैं, मुझे लगता है कि एक विरोधाभास के लिए जगह बनाएगा और इस प्रकार, यह ब्राउज़रों पर अलग होगा। मुझे लगता है कि केवल एक काम के आसपास होगा।

— स्पर्श करें

3

निरपेक्ष स्थिति माता-पिता का सम्मान करती है, यह समन्वय प्रणाली का उपयोग करती है। जब आप शीर्ष 0px कहते हैं, तो इसका अर्थ है कि माता-पिता के ऊपर से 0px दूर। सवाल यह है कि क्या यह माता-पिता को ध्यान में रखना चाहिए या नहीं। यदि माता-पिता के पास 5px की पैडिंग है और आपने बच्चे को टॉप: -5 पीएक्स दिया है, तो यह माता-पिता के साथ फ्लश डाल देगा यदि माता-पिता की पैडिंग को सम्मानित किया गया था, या माता-पिता के ऊपर 5 पीएक्स अगर यह नहीं था।

— d512

3

1.) आप माता-पिता पर बड़ी सीमा का उपयोग नहीं कर सकते हैं - यदि आप विशिष्ट सीमा चाहते हैं तो

2.) आप मार्जिन नहीं जोड़ सकते हैं - यदि आपका माता-पिता किसी अन्य कंटेनर का हिस्सा है और आप चाहते हैं कि आपका माता-पिता पूर्ण रूप से ले जाए उस भव्य माता-पिता की चौड़ाई।

एकमात्र समाधान जो लागू होना चाहिए, वह है कि आप अपने बच्चों को दूसरे कंटेनर में लपेटें ताकि आपके माता-पिता दादा-दादी बन जाएं और फिर नए बच्चों के रैपर / माता-पिता के लिए पैडिंग लागू करें। या आप सीधे बच्चों को पैडिंग लगा सकते हैं।

आपके मामले में:

.css-sux{
  padding: 0px 10px 10px 10px;
}

— bhavya_w
स्रोत

1

Div के अतिरिक्त स्तर का उपयोग करके आसानी से किया जा सकता था।

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

डेमो: https://jsfiddle.net/soxv3vr0/

— asankasri
स्रोत

0

पैडिंग जोड़ें : अपनी पूर्ण स्थिति में वारिस करें

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>

स्निपेट का विस्तार करें

— ßãlãjî
स्रोत