آموزش ویژگی z-index در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی z-index در CSS با من همراه باشید.

آموزش ویژگی z-index در CSS

Free-Learn

ویژگی z-index در CSS

با استفاده از ویژگی z-index در CSS میتوان ترتیب قرار گیری عناصر بروی همدیگه را مشخص و یا تعریف کرد، اینکه مثلا یک عنصر بالاتر از بقیه ی عناصر در صفحه نمایش داده شود.

بصورت پیش فرض خب هرچقدر عنصر در یک صفحه ایجاد شود چون Position ( موقعیت ) بصورت خودکار Static دارند پس به ترتیب زیر همدیگه قرار میگیرند.

حال اگه از Position ( موقعیت ) مطلق یا ( Absolute ) بروی چندین عنصر استفاده نماییم، عناصر میوفتن روی همدیگه و به اصطلاح میگیم روی همدیگه انباشته میشوند.

در نتیجه عناصر زیر همدیگه گم میشن، این درحالیه که مثلا شما میخواید فلان عنصر بالاتر از همه قرار بگیرد ، پس در این مواقع به راحتی و با استفاده از ویژگی z-index متونید اون عنصر رو بیارید بالاتر از بقیه عناصر در صفحه.

یک عنصر حتما باید موقعیت دار مثه absolute یا relative و.. باشد تا ویژگی z-index بروی آن اثر داشته باشد در غیراینصورت ویژگی z-index بی اثر خواهد بود.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی z-index را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده در تگ div برای بالا آوردنش بروی تمامی عناصر موجود در صفحه

امتحان کنید

مثال شماره ۲ : استفاده در تصویر – با مقدار منفی عنصر رو میکشه به زیر دیگر عناصر

امتحان کنید

Free-Learn

جدول مشخصات ویژگی z-index در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت object.style.zIndex=”100″;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی z-index در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
z-index ۴٫۰ ۳٫۰ ۱۰٫۰ ۳٫۱ ۶٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی z-index در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – بصورت خودکار توسط مرورگرها مشخص میشود
number یک عدد مثبت یا منفی میپذیرد
عدد مثبت عنصر رو میاره بالا و منفی عنصر رو میبره زیر
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

ترتیب قرار گرفتن و z-index دادن به عناصر دارای اولویت می باشد، بفرض مثال اگه ۳ تا عنصر در صفحه داشته باشیم و هر یک از عناصر هم z-index به شکل زیر داشته باشند :

طبق دستورات بالا، باکس شماره ۳ ( box3 ) بالاتر از بقیه عناصر در صفحه قرار خواهد گرفت و بعد از اون باکس شماره ۲ هست که بالاتر قرار خواهد گرفت، یعنی اگر باکس شماره ۳ حذف شد، این باکس شماره ۲ هست که میاد بالا.

حال اگه بخوایم باکس شماره ۱ رو بیاریم بالاتر از همه باکس ها، باید z-index باکس شماره ۱ رو بیشتر از عدد ۳ ( که متعلق به باکس شماره ۳ هس ) قرار بدیم. مثله :

 

Free-Learn

دریافت PDF یا پرینت این مطلب