Z-indeks dominant emasmi?

Men aytmoqchi bo'lgan narsa, bu vaziyatda WHY z-index hisobga olinmasligi kerakmi?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#IAmGreater{
position:fixed;
z-index: 999!important;
background-color: green;
height: 50px;
width: 50px;
top: 0;
left: 0;
}
#parent{
background-color: blue;
height: 200px;
width: 200px;
position: fixed;
margin: 50px;
}
#IAmDown{
position: absolute;
z-index: 0;
background-color:red;
height:100px;
width: 100px;
}
<div id="parent">

</div>
<div id="IAmDown">
</div>
</div> </div>

#IAmGreater can only be on top of #IAmDown if I set the IAmDown to z-index: -1 but in this case the parent div will also be on top of IAmDown and I don't want that. All I want is that the Green box be on top of the Red box and the Red box is on top of the blue one.

Bu chetga ga ruxsat berish uchun yashirin qutichni ota-onadan tashqariga ko'chirish yoki HTMLni EDIT ga ko'chirish mumkinmi?

JavaScript-ni (JQuery-da emas, balki) foydalanib, bu bilan ishlayapman, lekin buni bilmayman. Yordam bering?

0
Siz ularni turli div'lar qilishingiz kerak
qo'shib qo'ydi muallif Dragos, manba
Siz ularni turli div'lar qilishingiz kerak
qo'shib qo'ydi muallif Dragos, manba
Ota-element o'z kompaktsion kontekstini yaratadi. z-index global narsa emas.
qo'shib qo'ydi muallif Pointy, manba
#IAmGreater manzilini kodini o'zgartiring.
qo'shib qo'ydi muallif DIEGO CARRASCAL, manba
#IAmGreater manzilini kodini o'zgartiring.
qo'shib qo'ydi muallif DIEGO CARRASCAL, manba
Jin ursin. HTML ma'lumotlarini o'zgartirmasdan istalgan chiqishni olishning biron bir usuli bormi?
qo'shib qo'ydi muallif Arkonsol, manba
Jin ursin. HTML ma'lumotlarini o'zgartirmasdan istalgan chiqishni olishning biron bir usuli bormi?
qo'shib qo'ydi muallif Arkonsol, manba

6 javoblar

Uning ota-onasi ( #parent ) z-indeksiga ega emas, shuning uchun. #IAmDown dan katta bo'lgan birini qo'shsangiz, u kutilganidek o'zgaradi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#IAmGreater{
position:fixed;
z-index: 999!important;
background-color: green;
height: 50px;
width: 50px;
top: 0;
left: 0;
}
#parent{
background-color: blue;
height: 200px;
width: 200px;
position: fixed;
margin: 50px;
z-index:1;
}
#IAmDown{
position: absolute;
z-index: 0;
background-color:red;
height:100px;
width: 100px;
}
<div id="parent">

</div>
<div id="IAmDown">
</div>
</div> </div>
0
qo'shib qo'ydi
Ikkinchi javobni, siz xohlagan narsani qildim, lekin o'zgargan HTML strukturasini joylashtirdim. Javascript bilan asl HTML-da foydalanish mumkinligiga shubha qilaman, chunki natijani olishning yagona usuli HTMLni o'zgartirishdir.
qo'shib qo'ydi muallif Johannes, manba
Joriy HTML strukturasi bilan ishlamaydi - siz ota-ona va uning farzandlari orasida tashqi elementni qo'ya olmaysiz.
qo'shib qo'ydi muallif Johannes, manba
Men faqatgina Yashil quti Qizil qutiga teparoqda, Qizil quti esa ko'kning ustida joylashgan bo'lishi kerak.
qo'shib qo'ydi muallif Arkonsol, manba
shuning uchun JavaScript-da ham asosan imkonsiz?
qo'shib qo'ydi muallif Arkonsol, manba

Mana, sizning birinchi javobingizga izoh berishni so'raganingizda, bu echimdan iborat bo'lgan ikkinchi javob. Barcha elementlarning qattiq pozitsiyasi bor va yashil rang qizil rangdan tashqariga ko'chiriladi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#IAmGreater{
position:fixed;
z-index: 999!important;
background-color: green;
height: 50px;
width: 50px;
top: 0;
left: 0;
}
#parent{
background-color: blue;
height: 200px;
width: 200px;
position: fixed;
margin: 50px;
}
#IAmDown{
position: fixed;
z-index: 0;
background-color:red;
height:100px;
width: 100px;
}
<div id="parent">
</div>

<div id="IAmDown">
</div>
</div> </div>
0
qo'shib qo'ydi
Ha, shunday. Agar ota-kod kodini oraliqda o'radi va parent kodini ota-kod ga qo'shishni xohlasangiz. Hech bo'lmaganda tovushlar mumkin emas
qo'shib qo'ydi muallif Oke Tega, manba
O'ylaymanki, bu haqiqatan ham mumkin emas. : /
qo'shib qo'ydi muallif Arkonsol, manba

This works. Made a change in html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#IAmGreater{
position:fixed;
z-index: 1000;
background-color: green;
height: 50px;
width: 50px;
top: 0;
left: 0;
}
#parent{
background-color: blue;
height: 200px;
width: 200px;
position: fixed;
z-index: -1;
margin: 50px;
}
#IAmDown{
position: absolute;
background-color:red;
height:100px;
width: 100px;
z-index: 0;
}
<div id="parent"></div>

<div id="IAmDown">
</div>
</div> </div>
0
qo'shib qo'ydi
Bu yashirin qutichani ota-onasidan tashqariga ko'chirish yoki HTMLni tahrirlash uchun bir qaror bormi?
qo'shib qo'ydi muallif Arkonsol, manba

This works. Made a change in html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#IAmGreater{
position:fixed;
z-index: 1000;
background-color: green;
height: 50px;
width: 50px;
top: 0;
left: 0;
}
#parent{
background-color: blue;
height: 200px;
width: 200px;
position: fixed;
z-index: -1;
margin: 50px;
}
#IAmDown{
position: absolute;
background-color:red;
height:100px;
width: 100px;
z-index: 0;
}
<div id="parent"></div>

<div id="IAmDown">
</div>
</div> </div>
0
qo'shib qo'ydi
Bu yashirin qutichani ota-onasidan tashqariga ko'chirish yoki HTMLni tahrirlash uchun bir qaror bormi?
qo'shib qo'ydi muallif Arkonsol, manba

Bu qo'rqinchli istifleme indeks muammolarni biri hisoblanadi: https://developer.mozilla.org/en- AQSh/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Joylashuvga ega elementni yaratganingizdan so'ng: sobit, yangi ketma-ket kontekst yaratasiz. Sizni istifleme kontekstlari orasida aralashtirish mumkin emas.

Afsuski, belgilanishingizni o'zgartiring.

<div id="newParent">
 <div id="oldParent"></div>
 
</div>
 <div id="IAmDown">
</div>
0
qo'shib qo'ydi
Bu yashirin qutichani ota-onasidan tashqariga ko'chirish yoki HTMLni tahrirlash uchun bir qaror bormi?
qo'shib qo'ydi muallif Arkonsol, manba

Bu qo'rqinchli istifleme indeks muammolarni biri hisoblanadi: https://developer.mozilla.org/en- AQSh/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Joylashuvga ega elementni yaratganingizdan so'ng: sobit, yangi ketma-ket kontekst yaratasiz. Sizni istifleme kontekstlari orasida aralashtirish mumkin emas.

Afsuski, belgilanishingizni o'zgartiring.

<div id="newParent">
 <div id="oldParent"></div>
 
</div>
 <div id="IAmDown">
</div>
0
qo'shib qo'ydi
Bu yashirin qutichani ota-onasidan tashqariga ko'chirish yoki HTMLni tahrirlash uchun bir qaror bormi?
qo'shib qo'ydi muallif Arkonsol, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb