z-index چیست؟

شروع موضوع توسط o_real_love ‏17 آوریل 2010 در انجمن زبان HTML

کلمات کلیدی:
  1. o_real_love

    o_real_love Well-Known Member

    ارسال‌ها:
    499
    تشکر شده:
    772
    امتیاز دستاورد:
    93
    سلام به دوستان
    من css تازه یاد گرفتم
    می خوام بدونم z-index چیه؟
    به چه دردی میخوره؟
    اگه کسی نمونه دمو هم بذاره ممنون میشم.:rose:
     
    نوشته شده توسط o_real_love در ‏17 آوریل 2010
    pouya saadeghi از این پست تشکر کرده است.
  2. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    همونطور که تو فتوشاپ میشه لایه ها رو زیر یا روی دیگر لایه ها گذاشت ، تو برنامه نویسی شی گرا این کار با z-index یا z-order انجام میشه.
    مثلا یک لایه absolute رو روی یه لایه دیگه قرار بدیم ، حتی اگه کد html اون لایه قبل از لایه مورد نظر نوشته شده باشه. حرف z هم همون محور z ها در مختصات xyz هستش :wink:
     
    نوشته شده توسط pouya saadeghi در ‏17 آوریل 2010
    ijnaraghi، asirap، echessdesign و یک نفر دیگر از این ارسال تشکر کرده اند.
  3. o_real_love

    o_real_love Well-Known Member

    ارسال‌ها:
    499
    تشکر شده:
    772
    امتیاز دستاورد:
    93
    خب این z-index چه مقادیری رو قبول میکنه؟
    میتونی یه دمو واسه این بذاری؟
    یک دموی خوب که متوجه بشم ( من خنگ نیستم -- یه کم توضیح بدی سریع متوجه میشم:green: )
     
    نوشته شده توسط o_real_love در ‏17 آوریل 2010
    pouya saadeghi از این پست تشکر کرده است.
  4. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    مقدار عدد باید باشه (اعداد منفی تو بعضی مرورگرها کار نمیکنه)
    الان یه نمونه میذارم...
     
    نوشته شده توسط pouya saadeghi در ‏17 آوریل 2010
    asirap، echessdesign و o_real_love از این ارسال تشکر کرده اند.
  5. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    همونطورکه میبینید کد 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>
     
     
    آخرین ویرایش: ‏17 آوریل 2010
    نوشته شده توسط pouya saadeghi در ‏17 آوریل 2010
    pari8002، asirap و o_real_love از این ارسال تشکر کرده اند.
  6. o_real_love

    o_real_love Well-Known Member

    ارسال‌ها:
    499
    تشکر شده:
    772
    امتیاز دستاورد:
    93
    عالی بود
    دقیقا متوجه شدم
    دستت درد نکنه
    ( اگه شما نبودی من سراغ css نمی رفتم -- و همونطور طراحی هام رو با table انجام می دادم:rose::oops: )
     
    نوشته شده توسط o_real_love در ‏17 آوریل 2010
    pouya saadeghi از این پست تشکر کرده است.
  7. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    o_real_love عزیز
    شما می تویند با مطالعه کتاب :
    آموزش CSS, HTML, XHTML
    نویسنده: خانوم الیزابت کاسترو
    انتشارات: ناقوس
    به تمامی سوالات خود رسیده و سوالاتی در سطح مقبول تری مطرح کنید.
     
    نوشته شده توسط echessdesign در ‏21 آوریل 2010
    pouya saadeghi، o_real_love و asirap از این ارسال تشکر کرده اند.

به اشتراک بگذارید