آموزش لایه ها در CSS

4 سال پیش

امتیاز دهید post

آموزش لایه ها در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش لایه ها در CSS خواهیم پرداخت.

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

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

ویژگی z-index می تواند به شما کمک کند تا طرح های پیچیده تری از صفحه وب را ایجاد کنید. در زیر مثالی آورده شده است که نحوه ایجاد لایه ها در CSS را نشان می دهد.

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div style = "background-color:red; 
         width:300px; 
         height:100px; 
         position:relative; 
         top:10px; 
         left:80px; 
         z-index:2"&gt;
      &lt;/div&gt;
      
      &lt;div style = "background-color:yellow; 
         width:300px; 
         height:100px; 
         position:relative; 
         top:-60px; 
         left:35px; 
         z-index:1;"&gt;
      &lt;/div&gt;
      
      &lt;div style = "background-color:green; 
         width:300px; 
         height:100px; 
         position:relative; 
         top:-220px; 
         left:120px; 
         z-index:3;"&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<div style = "background-color:red;

width:300px;

height:100px;

position:relative;

top:10px;

left:80px;

z-index:2">

</div>

<div style = "background-color:yellow;

width:300px;

height:100px;

position:relative;

top:-60px;

left:35px;

z-index:1;">

</div>

<div style = "background-color:green;

width:300px;

height:100px;

position:relative;

top:-220px;

left:120px;

z-index:3;">

</div>

</body>

</html>

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش لایه ها در CSS

آموزش لایه ها در CSS

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش لایه ها در CSS

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه