सीएसएस में तत्व स्थिति - जावास्क्रिप्ट, एचटीएमएल, सीएसएस, सीएसएस-स्थिति

मैं सीएसएस का उपयोग करने में अभी भी नौसिखिया हूँ .. मुझे वास्तव में मोबाइल ऐप के लिए हमारी टीम के छोटे प्रोजेक्ट: डी: करने के लिए मदद चाहिए

यहाँ मेरा सवाल है: डी क्या सीएसएस के लिए "एक तत्व" को "दूसरे तत्व" से ऊपर रखना संभव है ??

उदाहरण के लिए मेरे पास "एक लकड़ी का बोर्ड" तत्व है और मैंएक और तत्व "लाठी" है। मैं "लकड़ी के बोर्ड" तत्व के पीछे "छड़ी" तत्व को पसंद करूँगा .. इसलिए यह बिलबोर्ड शैली की तरह है: डी (यदि फ़ोटोशॉप में, हम परत को "बोर्ड" के नीचे "स्टिक" खींच सकते हैं)

यदि यह संभव है, तो इसे कैसे करें?

मैं कुछ स्रोतों की तलाश करने की कोशिश करता हूं लेकिन कुछ भी परिणाम नहीं मिला ।। किसी भी मदद की सराहना की जाएगी: डी (कोड / संदर्भ / आदि) बहुत बहुत धन्यवाद

नायब: "छवि पोस्ट नहीं कर सकता :( जब से मैं सिर्फ स्टैकओवरफ़्लो का उपयोग करना शुरू करता हूं, क्षमा करें :(

उत्तर:

उत्तर № 1 के लिए 1

हाँ, आप इसे प्राप्त करने के कई तरीके हैं ..

1 का उपयोग कर position: relative; तथा z-index(वैकल्पिक)

डेमो

<div class="one"></div>
<div class="two"></div>


.one {
height: 100px;
width: 100px;
background: #f00;
}

.two {
height: 100px;
width: 100px;
background: #0f0;
position: relative;
top: -70px;
left: 30px;
}

2 आप उपयोग कर सकते हैं position: absolute; अंदर लपेटा हुआ position: relative; पात्र

डेमो 2

<div class="one">
<div class="two"></div>
</div>

.one {
height: 100px;
width: 100px;
background: #f00;
position: relative;
}

.two {
height: 100px;
width: 100px;
background: #0f0;
position: absolute;
bottom: -30px;
left: 30px;
}

पहला उदाहरण उपयोगी है यदि आपके पास 2 अलग-अलग तत्व हैं, तो आप उपयोग कर सकते हैं position: relative; और उपयोग के अनुसार तत्व की स्थिति top, right, bottom तथा left गुण।

अन्य उदाहरण का उपयोग करता है position: absolute; लेकिन क्या आपने मार्कअप में बदलाव देखा? मैं तैनात हूँ absolute the child तत्व है, जो अंदर नेस्टेड है position: relative; तत्व. मैं इस समाधान पसंद करेंगे ।

z-index वैकल्पिक है, अगर तुम चाहो तो दूसरे पर 1 तत्व लाने कहना

डेमो

सुनिश्चित करें कि आप उपयोग करते हैं position संपत्ति जो relative absolute या fixed जैसा z-index पर काम नहीं करता है static जो डिफ़ॉल्ट स्थिति हो ।

---

इसके अलावा मैं यहां जोड़ना चाहते हैं, कि मैं didn "टी प्रदान की z-index डेमो 2 के लिए समाधान चूंकि तत्व नेस्टेड होते हैं, इसलिए आप किसी चाइल्ड तत्व को पैरेंट के पीछे स्थित नहीं कर सकते, यह पैरेंट तत्व इनहेरिट करता है z-index

---

जवाब के लिए 0 № 2

बेला

आपको बस उपयोग करने की ज़रूरत है z- सूचकांक गुण.

प्रलेखन:

http://css-tricks.com/almanac/properties/z/z-index/

http://www.w3schools.com/cssref/pr_pos_z-index.asp

नमूना कोड:

  #hermano-0{//for base layer--zindex is 0
z-index:0;
top:0; left:0;
background:red;
}
#hermano-1{for layer above it we give z-index =1
z-index:1;
top:20px;
left:20px;
background:#a3dbcb;
}
#hermano-N{ for layer above it we give z-index =2
z-index:2;
top:40px;
left:40px;
background:gray;
color:white;
}

---