ستروکیت

چگونه می‌توان یک متن یا بلاک را روی یک تصویر در صفحات وب قرار داد؟ در این مقاله ما به شما آموزش می‌دهیم که چطور با CSS می‌شود این کار را انجام داد.

برای انجام این کار ابتدا بهتر است با مفهوم position در CSS آشنا شوید. ویژگی position وضعیت یک عنصر (استاتیک ، نسبی ، ثابت ، مطلق یا چسبنده) را مشخص می‌کند.

پنج مقدار مختلف برای position وجود دارد:

• static
• relative
• fixed
• absolute
• sticky

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

برای آموزش، ما دو مقدار relative و absolute را نیاز داریم، که آن‌ها را توضیح می‌دهیم:

position: relative;

یک عنصر با position: relative; نسبت به موقعیت عادی خود، موقعیت می‌گیرد.

تنظیم ویژگی‌های بالا، راست، پایین و سمت چپ یک عنصر موقعیت-نسبی باعث می‌شود که آن را نسبت به حالت عادی خود موقعیت دهی کند. سایر مطالب فاصله‌ای را که عنصر باقی گذاشته است را پر نخواهند کرد.

مانند مثال زیر:

div.relative {
 position: relative;
 right: 30px;
 border: 3px solid #563d7c;
}

position: absolute;

یک عنصر با position: absolute; نسبت به نزدیک‌ترین عنصر والد خود که موقعیت relative دارد موقعیت دهی می‌شود و اگر نداشته باشد نسبت به body موقعیت دهی می‌شود.

مانند مثال زیر:

 div.relative {
 position: relative;
 width: 400px;
 height: 200px;
 border: 3px solid #73AD21;
} 

div.absolute {
 position: absolute;
 top: 80px;
 left: 0;
 width: 200px;
 height: 100px;
 border: 3px solid #73AD21;
}

حال با توجه به توضیحات بالا می‌توانیم به سادگی متن را روی تصویر قرار دهیم.

دریاچه گهر

دورود - لرستان

چگونه متن را روی تصویر قرار دهیم؟

گام اول) اضافه کردن HTML:

<div class="container">
 <img src="nature.jpg" alt="Norway" style="width:100%;">
 <div class="text-block"> 
  <h4>دریاچه گهر</h4>
  <p>دورود-لرستان</p>
 </div>
</div>

گام دوم) اضافه کردن CSS:

/* Container holding the image and the text */
.container {
 position: relative;
}

/* Bottom right text */
.text-block {
 position: absolute;
 bottom: 20px;
 left: 20px;
 background-color: black;
 color: white;
 padding-left: 20px;
 padding-right: 20px;
}