सीएसएस संक्रमण और जेड-इंडेक्स

मेरे पास ड्रॉपडाउन के साथ एक निश्चित शीर्ष नौसेना है। मैं होवर पर ड्रॉपडाउन मेनू को स्लाइड करना चाहता हूं। मैं चाहता हूं कि मेनू स्लाइडिंग करते समय नेविबार के पीछे है। इसलिए मैंने बस उन दोनों तत्वों के z-index को सेट करने का प्रयास किया है, जो दुर्भाग्य से मेरे लिए काम नहीं करते थे।सीएसएस संक्रमण और जेड-इंडेक्स

यहाँ

एक सरल उदाहरण (codepen)

एचटीएमएल

<div class="fixed-top"> 
    <span class="trigger">hover me</span> 
    <div class="menu"></div> 
</div>

सीएसएस

.fixed-top { 
    background: #3b5999; 
    height: 50px; 
    width: 100%; 
    padding: 0; 
    top: 0; 
    position: fixed; 
    z-index: 2; 
} 

.trigger { 
    z-index: 2; 
    font-size: 33px; 
    color: white; 
    margin-left: 50%; 
} 

.trigger:hover + .menu { 
    margin-top: 0; 
} 

.menu { 
    z-index: 1; 
    height: 300px; 
    background-color: #1c7754; 
    width: 400px; 
    margin: auto; 
    margin-top: -400px; 
    transition: all 0.75s ease-out; 
}

मामले में यह स्पष्ट नहीं है कि क्या मैं यहाँ एक सरल MSPaint स्केच क्या करना चाहते हैं;)

स्रोत

2015-11-25 Brettetete

@ जस्टकोड मेरे चयनकर्ता वास्तव में ठीक काम कर रहा है: डी, आपके कोड का परिणाम मेरे – Brettetete

जैसा ही है, लेकिन जब मैंने क्लिक किया तो यह अब काम करने के रूप में काम नहीं कर रहा था: पी –

यह आपको संदर्भों को ढेर समझने में मदद कर सकता है: http : //stackoverflow.com/a/32515284/3597276 –

कोड स्निपेट चलाने का प्रयास करें।

.fixed-top { 
 
    background: #3b5999; 
 
    height: 50px; 
 
    width: 100%; 
 
    padding: 0; 
 
    top: 0; 
 
    position: fixed; 
 
    z-index: 2; 
 
} 
 

 
.trigger { 
 
    font-size: 33px; 
 
    color: white; 
 
    margin-left: 50%; 
 
    width: 100%; 
 
    height: 50px; 
 
    top: 0; 
 
    position: fixed; 
 
    z-index: 3; 
 
} 
 

 
.trigger:hover + .menu, 
 
.menu:hover{ 
 
    margin-top: 0; 
 
} 
 

 
.menu { 
 
    z-index: 1; 
 
    height: 300px; 
 
    background-color: #1c7754; 
 
    width: 400px; 
 
    margin: auto; 
 
    margin-top: -400px; 
 
    transition: all 0.75s ease-out; 
 
}

<div class="fixed-top"></div> 
 
<span class="trigger">hover me</span> 
 
<div class="menu"></div>

स्रोत

2015-11-25 04:49:28 kolunar

यह काम कर रहा है, धन्यवाद। लेकिन tbh मैं इसके साथ बहुत खुश नहीं हूँ ..: डी [संबंधित सवाल] (http: // stackoverflow।कॉम/प्रश्न/33908787/is-there-a-css-selector-that-selects-an-element-out-the-current-element) – Brettetete

अच्छा, अगर कोई आपके एचटीएमएल के कंकाल समझौता किए बिना इसे प्राप्त कर सकता है तो आश्चर्यचकित होगा :) – kolunar

@ कोलुनार उम्म, तुम्हारा मतलब है कि मैंने अपने जवाब में कैसे किया? – bowheart

मुझे लगता है कि यह तुम क्या चाहते है।

सीएसएस कोड

.fixed-top { 
    background: #3b5999; 
    height: 50px; 
    width: 100%; 
    padding: 0; 
    top: 0; 
    position : fixed; 
} 

.trigger { 
    z-index: 500; 
    font-size: 33px; 
    color: white; 
    margin-left: 50%; 
    position : absolute; 
} 

.trigger:hover + .menu { 
    margin-top: 0; 
} 

.menu { 
    z-index: -9999; 
    position : relative; 
    height: 300px; 
    background-color: #1c7754; 
    width: 400px; 
    margin: auto; 
    margin-top: -400px; 
    transition: all 0.75s ease-out; 
} 

    <div class="fixed-top"> 
    <span class="trigger">hover me</span> 
    <div class="menu"></div> 
</div>

यहां संदर्भ है कि आप जाँच कर सकते हैं

http://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

स्रोत

2015-11-25 05:02:10

मेरे लिए काम नहीं कर रहा है [पेन] (http://codepen.io/anon/pen/xwNMBj?editors=110) – Brettetete

यह एक बहुत ही सामान्य त्रुटि जब सीएसएस में स्टैकिंग संदर्भ के साथ काम करने की शुरुआत है। असल में, आपको बस याद रखना होगा कि एक बच्चा माता-पिता से अलग स्टैकिंग संदर्भ में मौजूद नहीं हो सकता है।

तो यदि मेरे पास एक गैर स्थैतिक तत्व है (जिसका अर्थ position: anything-but-static [fixed, relative, absolute] वाला तत्व है), और यदि उस तत्व के पास कोई गैर स्थैतिक मूल तत्व नहीं है, तो यह संदर्भ स्तर 1 को ढेर कर देगा, इससे कोई फर्क नहीं पड़ता कि यह कहां है डोम। अब अगर उस तत्व में एक गैर स्थैतिक बाल तत्व है, तो वह बच्चा संदर्भ स्तर 2 को ढेर करेगा। यह अपने मूल तत्व के समान स्तर (स्तर 1) पर नहीं हो सकता है। z-index केवल उसी स्टैकिंग संदर्भ स्तर पर तत्वों को प्रभावित कर सकता है, इसका अलग-अलग स्टैकिंग संदर्भ स्तरों पर तत्वों के साथ कुछ लेना देना नहीं है।

समाधान, अपने HTML पुनर्गठन करने, या बस का उपयोग एक :before या :after छद्म तत्व है इस प्रकार:

.fixed-top { 
    height: 50px; 
    width: 100%; 
    padding: 0; 
    top: 0; 
    position: fixed; /* The parent: stacking context level 1 */ 
} 
.fixed-top:before { 
    background: #3b5999; 
    content:''; 
    position: absolute; /* stacking context level 2 */ 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 1; 
} 
.trigger { 
    color: white; 
    font-size: 33px; 
    margin-left: 50%; 
    position: relative; /* also stacking context level 2 */ 
    z-index: 2; 
} 
.trigger:hover + .menu { 
    margin-top: 0; 
} 
.menu { /* bottom layer -- no stacking context necessary */ 
    z-index: 0; 
    height: 300px; 
    background-color: #1c7754; 
    width: 400px; 
    margin: auto; 
    margin-top: -400px; 
    transition: all 0.75s ease-out; 
}

नोट टिप्पणियां स्टैकिंग संदर्भ स्तरों को संकेतित करते।

और उदाहरण के लिए यहां JSFiddle है।

स्रोत

2015-11-25 05:03:41 bowheart

अच्छा, अभी भी इसे बदलने की जरूरत है यह: '.trigger: होवर + .menu, .menu: होवर' ताकि जब माउस 'span' छोड़ देता है, तो मेनू वापस नहीं आ जाएगा, +1 –

@ एमआई-क्रिएटिविटी मैं यह नहीं बता सकता कि वह हिस्सा है कल्पना, लेकिन मैं आपको सुझाव के लिए kudos दे देंगे। – bowheart

यह वह उत्तर है जिसे मैं ढूंढ रहा था। मैं अब इन लक्षणों को देख रहा हूं और जेड-इंडेक्स के साथ कुछ गड़बड़ करने के बाद, मुझे दृढ़ता से महसूस करना शुरू हो गया कि बच्चे कभी माता-पिता के अधीन नहीं जा सकते। मैंने इसे अभी तक हल नहीं किया है, लेकिन आपकी पोस्ट और आपके उदाहरणों के बीच, मुझे सक्षम होना चाहिए। – agm1984

सीएसएस संक्रमण और जेड-इंडेक्स

उत्तर

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