2015-03-26 18 views
6

के साथ दिखाई देता है, इसलिए, मेरी वेबसाइट में एक शीर्षलेख है और इसके बाद तुरंत क्रांति स्लाइडर युक्त एक div है। मैं शीर्षलेख के नीचे एक बॉक्स-छाया जोड़ने की कोशिश कर रहा हूं - और स्लाइडर के ऊपर। लेकिन यह काम नहीं करता है, जब तक कि मैं शीर्षलेख में margin-bottom भी जोड़ता हूं - लेकिन यह पूरे अभ्यास को प्रस्तुत करता है।सीएसएस बॉक्स-छाया केवल मार्जिन

#header { 
 
    display:block; 
 
    min-height: 99px; 
 
    background: #FFFFFF; 
 
    border-top: 3px solid #8dddcd; 
 
    border-bottom: 1px solid #ecf0f1; 
 
    line-height: 99px; 
 
    box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3); 
 
} 
 
#rev { 
 
    position: relative; 
 
}
<div id="header"></div> 
 
<div id="rev">the slider</div>

किसी की मदद कर सके मुझे यह पता लगाने की यह क्या पैदा:

इस कोड है?

+0

संभावित डुप्लिकेट [क्या तत्व के बॉक्स मॉडल का सीएसएस बॉक्स-छाया हिस्सा है?] (Http://stackoverflow.com/questions/7036498/is-css-box-shadow-part-of-elements-box-model) – KyleMit

उत्तर

2

वास्तव में, इस मुद्दे को निकला अलग divs की z-index गुण से संबंधित होना। कुछ tweaking के साथ मैं किसी भी मार्जिन का उपयोग किए बिना इसे हल करने में कामयाब रहे।

वैसे भी, आपके समय और सहायता के लिए सभी को धन्यवाद!

1

जब आप बॉक्स-छाया (बाहरी छाया) के लिए डिफ़ॉल्ट प्रतिपादन मोड का उपयोग करते हैं, तो आपको उस दिशा में मार्जिन जोड़ने की आवश्यकता होती है (आपके उदाहरण में वाई-अक्ष पर 10px) ताकि अतिप्रवाह बॉक्स सामग्री दिखाई दे। यदि आप शीर्षलेख के अंदर अपना बॉक्स छाया प्रदर्शित करना चाहते हैं, तो बस अपनी घोषणा में कीवर्ड inset जोड़ें।

6

निम्नलिखित प्रश्न देखें:

box-shadow spec के अनुसार:

एक बाहरी बॉक्स छाया के रूप में अगर border- एक छाया डाले तत्व का बॉक्स अपारदर्शी था। छाया सीमा बढ़त के बाहर तैयार की है केवल

तो अगर आप ओवरलैप नहीं करना चाहते, तो आप मार्जिन जोड़ना होगा अपने आप

#header { 
 
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3); 
 
    margin-bottom: 10px; 
 
} 
 
#slider { 
 
    position: relative; 
 
}
<div id="header">Header</div> 
 
<div id="slider">Slider</div>

+0

धन्यवाद, केलीमिट! समस्या यह है कि एक बार जब मैं स्लाइडर div को 'डिस्प्ले: none' पर सेट करता हूं, तो छाया कहीं भी मार्जिन जोड़ने की ज़रूरत के बिना दिखाई देती है। स्लाइडर की कौन सी संपत्ति हेडर की छाया को प्रभावित कर सकती है, कोई विचार? – zkvvoob

+0

@zkvvoob, मुझे पूरा यकीन नहीं है कि मैं आपकी समस्या को समझता हूं। क्या आप वास्तव में क्या हो रहा है और आप क्या करना चाहते हैं, इसके स्क्रीनशॉट के साथ अपना प्रश्न अपडेट कर सकते हैं। अगर यह था कि स्लाइडर को 'डिस्प्ले' पर सेट करने पर आपको 'मार्जिन-तल' की आवश्यकता नहीं थी, तो आप इसके बजाय स्लाइडर में 'मार्जिन-टॉप' जोड़ सकते थे। – KyleMit

+0

मैं इसे समझने में कामयाब रहा। नीचे मेरा जवाब देखें। परेशानियों के लिए खेद है! – zkvvoob

2

आप के रूप में की जरूरत है आप केवल शीर्षलेख के ऊपर और ऊपर स्लाइडर के ऊपर बॉक्स-छाया कहते हैं, आप निम्नानुसार बॉक्स छाया में अंतिम संख्या में शून्य का उपयोग कर सकते हैं:

box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3); 

इससे बॉक्स-छाया केवल नीचे दिखाई देगी।

कार्य उदाहरण:

#header { 
 
    display:block; 
 
    min-height: 99px; 
 
    background: #FFFFFF; 
 
    border-top: 3px solid #8dddcd; 
 
    border-bottom: 1px solid #ecf0f1; 
 
    line-height: 99px; 
 
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3); 
 
} 
 
#rev { 
 
    position: relative; 
 
}
<div id="header"></div> 
 
<div id="rev">the slider</div>

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