آموزش ساخت عنصر ثابت با css | آموزش طراحی سایت

آموزش ساخت عنصر ثابت با css : ما در این مطلب از سایت آی وحید میخواهیم کمی از بحث های آموزش وردپرس دور شویم ، به همین خاطر برای شما آموزش ساخت عنصر ثابت با css آماده کردیم . با استفاده از این آموزش شما میتوانید یک عنصر ثابت رو به وسیله ی کدهای CSS تعریف و در سایتتون قرار بدید . پس با ما در ادامه مطلب برای دیدن آموزش همراه باشید .

آموزش ساخت عنصر ثابت با css

خصوصیت موقعیت در سی اس اس نوع موقعیت یک عنصر HTML در سایت رو تعریف میکنه ، اگر بخواهید موقعیت یک عنصر در صفحه همیشه به صورت ثابت باشه ( حتی در صورت اسکرول کردن ) ، شما میتوانید از یک موقعیت ثابت استفاده کنید .

در این آموزش من این کار رو به شما آموزش میدم :

گام اول : HTML

کد زیر رو به سایتتون اضافه کنید .

<div class="block">
    در این قسمت هر متنی که میخواهید در بلاک قرار گیرد را وارد کنید .
</div>

ما خودمون برای نمونه متن Lorem Ipsum رو قرار دادیم تا تست رو انجام بدیم .

گام دوم : CSS

کد سی اس اس رو به صورت زیر تعریف کنید :

.block {
    position: fixed;
}

اگر شما بخواهید میتونید اون رو سفارشی تر کنید ، ما برای تست از کدهای زیر استفاده کرده ایم تا بتونیم بلاک ثابتمون رو به صورت واضح تر به کاربران نمایش بدیم ، کد زیر رو نگاه کنید :

.block {
    position: fixed;
    background: #2184cd;
    color: #fff;
    padding: 20px;
    width: 400px;
}

گام سوم : نتیجه نهایی

ما متن رو قرار دادیم و سایت هم به راحتی اون رو شناسایی کرد ، حتی با اسکرول کردن هم بلاک مربوطه هیچ تغییر موقعیتی نمیده !

تصویر زیر گویای نمونه ی کار ما هست :

شما میتوانید این کد را در هر کجا که خواستید استفاده کنید و از آن لذت ببرید . ما در سایت آی وحید منتظر انتقادات و پیشنهادات شما عزیزان هستیم .