z-index چیست؟

o_real_love

Well-Known Member
سلام به دوستان
من css تازه یاد گرفتم
می خوام بدونم z-index چیه؟
به چه دردی میخوره؟
اگه کسی نمونه دمو هم بذاره ممنون میشم.:rose:
 

pouya saadeghi

Active Member
همونطور که تو فتوشاپ میشه لایه ها رو زیر یا روی دیگر لایه ها گذاشت ، تو برنامه نویسی شی گرا این کار با z-index یا z-order انجام میشه.
مثلا یک لایه absolute رو روی یه لایه دیگه قرار بدیم ، حتی اگه کد html اون لایه قبل از لایه مورد نظر نوشته شده باشه. حرف z هم همون محور z ها در مختصات xyz هستش :wink:
 

o_real_love

Well-Known Member
خب این z-index چه مقادیری رو قبول میکنه؟
میتونی یه دمو واسه این بذاری؟
یک دموی خوب که متوجه بشم ( من خنگ نیستم -- یه کم توضیح بدی سریع متوجه میشم:green: )
 

pouya saadeghi

Active Member
همونطورکه میبینید کد apDiv4 بعد از apDiv3 قرار گرفته ولی چون z-index کمتری داره زیرش قرار میگیره.

HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	background-color: #333333;
	left: 249px;
	top: 18px;
}
#apDiv2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:5;
	background-color: #FF00FF;
	left: 163px;
	top: 78px;
}
#apDiv3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:50;
	background-color: #006600;
	left: 250px;
	top: 166px;
}
#apDiv4 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:6;
	background-color: #003366;
	left: 333px;
	top: 108px;
}
-->
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
</body>
</html>
 
آخرین ویرایش:

o_real_love

Well-Known Member
عالی بود
دقیقا متوجه شدم
دستت درد نکنه
( اگه شما نبودی من سراغ css نمی رفتم -- و همونطور طراحی هام رو با table انجام می دادم:rose::oops: )
 

echessdesign

مدیر انجمن طراحی وب
o_real_love عزیز
شما می تویند با مطالعه کتاب :
آموزش CSS, HTML, XHTML
نویسنده: خانوم الیزابت کاسترو
انتشارات: ناقوس
به تمامی سوالات خود رسیده و سوالاتی در سطح مقبول تری مطرح کنید.
 

جدیدترین ارسال ها

بالا