آموزش موقعیت یابی در CSS

4 سال پیش

امتیاز دهید post

آموزش موقعیت یابی در CSS

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

CSS به شما کمک می کند تا عنصر HTML خود را موقعیت یابی کنید. شما می توانید هر عنصر HTML را در هر مکانی که دوست دارید قرار دهید. می توانید تعیین کنید که آیا می خواهید عنصر نسبت به موقعیت طبیعی آن در صفحه قرار گیرد یا مطلق بر اساس عنصر اصلی آن.

اکنون، تمام خصوصیات مربوط به موقعیت یابی CSS را با مثال مشاهده خواهیم کرد –

موقعیت یابی نسبی

موقعیت یابی نسبی موقعیت عنصر HTML را نسبت به محلی که در حالت عادی ظاهر می شود تغییر می دهد. بنابراین “left: 20” 20 پیکسل به موقعیت LEFT عنصر اضافه می کند.

می توانید از دو مقدار بالا و چپ به همراه ویژگی موقعیت استفاده کنید تا یک عنصر HTML را به هر نقطه از سند HTML منتقل کنید.

حرکت به چپ – از مقدار منفی برای چپ استفاده کنید.
حرکت به راست – از مقدار مثبت برای چپ استفاده کنید.
حرکت به بالا – از مقدار منفی برای بالا استفاده کنید.
حرکت به پایین – از مقدار مثبت برای بالا استفاده کنید.
توجه – می توانید از مقادیر پایین یا راست به همان روشی که در بالا و چپ قرار دارد استفاده کنید.

مثال

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

   &lt;body&gt;
      &lt;div style = "position:relative; left:80px; top:2px; background-color:yellow;"&gt;
         This div has relative positioning.
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

This div has relative positioning.

</div>

</body>

</html>

خروجی به صورت زیر می باشد:

This div has relative positioning.

1	This div has relative positioning.

موقعیت یابی مطلق

یک عنصر با موقعیت مطلق در مختصات مشخص شده نسبت به گوشه سمت چپ صفحه نمایش شما قرار دارد.

در اینجا یک مثال آورده شده است –

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div style = "position:absolute; left:80px; top:20px; background-color:yellow;"&gt;
         This div has absolute positioning.
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

This div has absolute positioning.

</div>

</body>

</html>

خروجی به صورت زیر می باشد:

This div has absolute positioning.

1	This div has absolute positioning.

موقعیت یابی ثابت

موقعیت یابی ثابت به شما امکان می دهد بدون در نظر گرفتن پیمایش، موقعیت یک عنصر را به یک نقطه خاص در صفحه ثابت کنید. مختصات مشخص شده مربوط به پنجره مرورگر خواهد بود.

در اینجا یک مثال آورده شده است –

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

   &lt;body&gt;
      &lt;div style = "position:fixed; left:80px; top:20px; background-color:yellow;"&gt;
         This div has fixed positioning.
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

This div has fixed positioning.

</div>

</body>

</html>

خروجی به صورت زیر می باشد:

This div has fixed positioning.

1	This div has fixed positioning.

منبع.

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

امتیاز دهید post

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

آموزش موقعیت یابی در CSS

آموزش موقعیت یابی در CSS

موقعیت یابی نسبی

مثال

موقعیت یابی مطلق

موقعیت یابی ثابت

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

دیدگاه شما

بدون دیدگاه

آموزش موقعیت یابی در CSS

موقعیت یابی نسبی

مثال

موقعیت یابی مطلق

موقعیت یابی ثابت

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

دیدگاه شما

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

بدون دیدگاه