सीएसएस का उपयोग करके तत्व को सामने लाएं

87

मैं यह पता नहीं लगा सकता कि कैसे छवियों को सामने लाया जाए CSS। मैंने पहले से ही z- इंडेक्स को 1000 तक सेट करने की कोशिश की है और रिश्तेदार को स्थिति दी है, लेकिन यह अभी भी विफल है।

यहाँ उदाहरण है-

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>
स्निपेट का विस्तार करें

html  css  z-index  jsfiddle 
— Stylock
स्रोत
सामने लाओ क्या? इसके अलावा <col> है पदावनत ।
— व्यू
छवियों को सामने लाएं।
— स्टाइलॉक
आप मेनू बनाने के लिए नेस्टेड तालिकाओं का उपयोग क्यों कर रहे हैं?
— ब्लेंडर
2
मुझे IE8 में मेनू के साथ समस्या थी और नेस्टेड टेबल ने इसे ठीक किया।
— स्टाइलॉक
यह वीडियो यह समझने में बेहद मददगार है कि यह कैसे काम करता है।
— J0ANMM

जवाबों:

135

जोड़ें z-index:-1और position:relative.Content को

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    z-index: -1;
    position:relative;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>
स्निपेट का विस्तार करें

— Sowmya
स्रोत
2
आपके समाधान ने पूरी तरह से काम किया। क्या आप कृपया बता सकते हैं कि यह काम क्यों करता है?
— रोगाणु
1
@Germstorm Z-indexनियंत्रित करता है कि कैसे चित्र या divs एक दूसरे के ऊपर ढेर हो जाते हैं। उच्च z- इंडेक्स वैल्यू वाली डिव / इमेज आगे की जगह लेती है और कम पीछे रहती है।
— सौम्या
मुझे वास्तव में अपने प्रश्न की परिस्थितियों को स्पष्ट रूप से याद नहीं है, लेकिन मेरी समस्या थी, कि मैं समझ गया कि क्या z-indexकरता है, लेकिन फिर भी यह काम नहीं किया। इस उत्तर से मैंने जो सीखा है, वह यह है कि z-indexआपको अपने माता-पिता के पदानुक्रम को भी ध्यान में रखना होगा।
— जर्मस्टॉर्म
2
@Germstorm सून खई से हाल ही में दिया गया उत्तर सही विवरण है: z- इंडेक्स का कोई प्रभाव नहीं है अगर तत्व तैनात नहीं है
— FelipeAls
2
@SpiderMan आप कहां से आए थे +1? यह मान्य नहीं है।
— sjagr
6

मेरे मामले में मुझे उस तत्व के HTML कोड को स्थानांतरित करना था जिसे मैं HTML फ़ाइल के अंत में मोर्चे पर चाहता था, क्योंकि यदि एक तत्व में z- इंडेक्स है और दूसरे में z इंडेक्स नहीं है तो यह काम नहीं करता है।

— Javobal
स्रोत
आपके उत्तर के 2 भाग संबंधित नहीं हैं (कम से कम कोई अन्य विवरण नहीं)। पहला भाग एक समाधान है क्योंकि HTML कोड में बाद वाले अन्य तत्वों के बराबर गुण पिछले लोगों के ऊपर प्रदर्शित होते हैं। दूसरा भाग कुछ टिप्पणी के बारे में है कि जेड-इंडेक्स का कुछ प्रभाव कैसे पड़ता है।
— फेलिपएल्स
1
सभी तत्वों के बारे में अच्छी बात यह काम करने के लिए z- सूचकांक होना चाहिए। धन्यवाद!
— साला सालेह
3

एक और नोट: अन्य वस्तुओं के सापेक्ष बच्चों की वस्तुओं को देखते समय z- इंडेक्स पर विचार किया जाना चाहिए।

उदाहरण के लिए

<div class="container">
    <div class="branch_1">
        <div class="branch_1__child"></div>
    </div>
    <div class="branch_2">
        <div class="branch_2__child"></div>
    </div>
</div>

यदि आपने branch_1__childएक z-index 99दिया है और आपने branch_2__child1 का z-index दिया है, लेकिन आपने अपना branch_2z-index भी दे दिया है 10और आपका branch_1z-index भी है 1, तो branch_1__childभी आपके सामने नहीं दिखेगाbranch_2__child

वैसे भी, मैं जो कहना चाह रहा हूं वह है; यदि आप जिस तत्व के माता-पिता को सामने रखना चाहते हैं, उसके रिश्तेदार की तुलना में कम z-सूचकांक है, तो वह तत्व उच्चतर नहीं रखा जाएगा।

Z- इंडेक्स इसके कंटेनरों के सापेक्ष है। एक पदानुक्रम में कंटेनर कंटेनर पर रखा गया एक z- सूचकांक मूल रूप से एक नई "परत" शुरू करता है

Incep [स्थापना] tion

यहाँ खेलने के लिए एक बेला है:

https://jsfiddle.net/orkLx6o8/

— ntgCleaner
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.