خاصیت zindex

[anahita6]

سلام
خاصیت zindex در css چه کاری انجام میده میشه با مثال توضیح بدین

[colors]

درود

نحوه قرار گیری عناصر رو هم رو نشون میده.

مثلا دوتا عنصر داری میخوای یکیش بیوفته رو اون یکی در این صورت از z-index استفاده میکنی

به عکس زیر دقت کن
83122

[anahita6]

دستت درد نکنه این عکس که گذشتی کدش ام میدی ؟
بعد هر عددی میتونه باشه؟
مثلا اگه یکی رو بدیم 1 بعدی رو بدیم 2 با اینکه یکی رو بدیم 1 و بعدی رو بدیم 200 چه فرقی میکنه

[buggen]

<div style="position:absolute;width:250px;height:200px;backgro und:red;top:0;left:0;opacity:0.8;"></div>
<div style="position:absolute;width:250px;height:200px;backgro und:blue;top:150;left:120;opacity:0.8;"></div>




بعد هر عددی میتونه باشه؟

هر چقدر عدد بزرگتر باشه بالاتر قرار میگیره

[anahita6]

هر چقدر عدد بزرگتر باشه بالاتر قرار میگیره
در مورد دو تا دیویژن که فرقی نمیکنه چقدر بالا باشه نه؟
بعد این مثال که شما گذاشتی که zindex نداره.

[colors]

دستت درد نکنه این عکس که گذشتی کدش ام میدی ؟
بعد هر عددی میتونه باشه؟
مثلا اگه یکی رو بدیم 1 بعدی رو بدیم 2 با اینکه یکی رو بدیم 1 و بعدی رو بدیم 200 چه فرقی میکنه

متاسفانه با فتوشاپ ساختم و کدی نداره ( خودت میتونی بنویسی )
چه 1 باشه چه 200 اگه عنصر بالای بیشتر باشه نمایشش اولویت داره

ضمنا باید توجه کنی که عناصرت زیر مجموعه یک عنصر باشن در غیر این صورت z-index کار نمیکنه ( مثلا این دوتا دیو باید بفرض زیر مجوعه ( فرزند ) یه دیو باشن )
کد زیرو ببین

<div>
<div> BOX 1 </div>
<div> BOX 2 </div>
</div>

[buggen]

تفاوت این دو رو ببینید


<div style="position:absolute;width:250px;height:200px;backgro und:red;top:0;left:0;opacity:0.8;z-index:1;"></div>
<div style="position:absolute;width:250px;height:200px;backgro und:blue;top:150;left:120;opacity:0.8;z-index:2;"></div>


<div style="position:absolute;width:250px;height:200px;backgro und:red;top:0;left:0;opacity:0.8;z-index:2;"></div>
<div style="position:absolute;width:250px;height:200px;backgro und:blue;top:150;left:120;opacity:0.8;z-index:1;"></div>


بعد این مثال که شما گذاشتی که zindex نداره
عذر می خوام اصلاح شد نو مثال من بر اساس ترتیب نوشتن خودش این کار رو انجام میده

[anahita6]

این مطلبی که گفتی الان متوجه شدم ولی منظورم این بود که عنصر بالا تر اگه 1دونه zindex اش بیشتر باشه یا 100 تا فرقی نمی کنه؟

[colors]

این مطلبی که گفتی الان متوجه شدم ولی منظورم این بود که عنصر بالا تر اگه 1دونه zindex اش بیشتر باشه یا 100 تا فرقی نمی کنه؟

نه فرقی نمیکنه