طرح‌بندی CSS - ویژگی position
- صفحه قبل max-width CSS
- صفحه بعدی z-index CSS
position نوع روش‌های تعیین موقعیت عنصر (ثابت، نسبی، ثابت، مطلق یا چسبنده) تعریف شده است.
property position
position این property نوع روش قرارگیری عناصر را مشخص می‌کند.
پنج value مختلف برای position وجود دارد:
- static
- relative
- fixed
- absolute
- sticky
عناصر در واقع با استفاده از properties top، bottom، left و right قرار داده می‌شوند. اما، مگر اینکه ابتدا property position تنظیم شود، این properties عمل نمی‌کنند. روش کار این properties بسته به values مختلف position متفاوت است.
position: static;
HTML elements به صورت پیش‌فرض به صورت static (قرار داده شده) قرار می‌گیرند.
عناصر قرار داده شده به صورت static تحت تأثیر properties top، bottom، left و right قرار نمی‌گیرند.
عناصر قرار داده شده به صورت static به هیچ وجه به صورت خاص قرار نمی‌گیرند؛ آنها همیشه بر اساس جریان طبیعی صفحه قرار می‌گیرند:
این CSS مورد استفاده است:
مثال
div.static {
position: static;
height: 100px;
}
position: relative;
position: relative; عناصر به نسبت مکان طبیعی خود قرار می‌گیرند.
تنظیم properties top، right، bottom و left عناصر قرار داده شده به صورت relative منجر به تغییر مکان طبیعی آنها می‌شود. این تغییرات برای تطبیق با فضای خالی باقی‌مانده از عنصر انجام نمی‌شود.
این CSS مورد استفاده است:
مثال
div.relative {
position: relative;
left: 30px;
height: 100px;
}
position: fixed;
position: fixed; عناصر قرار داده شده به نسبت视پورت قرار می‌گیرند، این به این معناست که حتی اگر صفحه را بچرخانید، آنها همیشه در یک مکان خاص قرار دارند. top، right، bottom و left برای قرارگیری این عنصر استفاده می‌شوند.
عناصر قرار داده شده به صورت fixed در صفحه در مکان‌هایی که معمولاً باید قرار گیرند، فضای خالی باقی نمی‌گذارند.
لطفاً این عنصر ثابت در گوشه پایین راست صفحه توجه کنید. این CSS مورد استفاده است:
مثال
div.fixed {
position: fixed;
bottom: 0;
top: 80px;
width: 300px;
height: 100px;
}
position: absolute;
position: absolute; عناصر به نسبت نزدیکترین جدانامه قرار داده شده آنها قرار می‌گیرند (و نه به نسبت视پورت مانند fixed).
هرچند که اگر عناصر قرار داده شده به صورت absolute هیچ جدانامه‌ای نداشته باشد، آنها از بدنه مستند (body) استفاده خواهند کرد و با صفحه به همراه حرکت می‌کنند.
توجه:عناصر "محل داده شده" مکان آنها را به جز static هر عناصر دیگری خارج از آن.
این یک مثال ساده است:
این CSS مورد استفاده است:
مثال
div.relative {
position: relative;
width: 400px;
height: 200px;
height: 100px;
}
height: 200px;
position: absolute;
div.absolute {
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
position: sticky;
position: sticky; border: 3px solid #73AD21;
عناصر چسبنده بر اساس موقعیت اسکرول کاربر قرار داده می‌شوند.relativeو چسبنده (fixedو بین آنها جابجا شود. در ابتدا آن به صورت قرارگیری نسبی خواهد بود، تا زمانی که در视وگاه به موقعیت تعیین شده برسد - سپس آن را در موقعیت مناسب «چسبانده» می‌کند (مثلاً position:fixed).
توجه:Internet Explorer، Edge 15 و نسخه‌های قدیمی‌تر از آنها از قرارگیری چسبنده پشتیبانی نمی‌کنند. Safari نیاز به پیشوند -webkit- دارد (لطفاً مثال زیر را ببینید). شما باید حداقل یکی از اینها را مشخص کنید topوrightوbottom یا left یکی از آنها، تا اینکه در视وگاه به موقعیت تعیین شده برسد - سپس آن را در موقعیت مناسب «چسبانده» می‌کند (مثلاً position:fixed).
در این مثال، در زمانی که به موقعیت اسکرول خود می‌رسد، عنصر sticky در بالای صفحه باقی می‌ماند (top: 0）。
مثال
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
عناصر برخورد کرده
در حالی که عناصر قرار داده می‌شوند، می‌توانند با عناصر دیگر برخورد کنند.
z-index ویژگی مشخص می‌کند که ترتیب قرارگیری عنصر است (کدام عنصر باید جلوی یا پشت دیگر عناصر قرار گیرد).
عناصر می‌توانند ترتیب قرارگیری مثبت یا منفی را تنظیم کنند:
این یک عنوان است
به دلیل اینکه z-index تصویر -1 است، بنابراین آن در پشت متن قرار دارد.
مثال
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
عناصر با ترتیب قرارگیری بالاتر همیشه قبل از عناصر با ترتیب قرارگیری پایین‌تر قرار می‌گیرند.
توجه:اگر دو عنصر قرار داده شده به هم برخورد کنند و مشخص نشده باشد z-index، بنابراین عنصر نهایی در کد HTML در بالا نمایش داده می‌شود.
تنظیم متن در تصویر
چگونه متنی را روی تصویر قرار دهیم:
مثال
آموزش عملی:
مثال‌های بیشتر
- تنظیم شکل عنصر
- این مثال نشان می‌دهد که چگونه می‌توان شکل یک عنصر را تنظیم کرد. عنصر به این شکل برش داده شده و نمایش داده می‌شود.
تمام ویژگی‌های قرارگیری CSS
| ویژگی | توضیح |
|---|---|
| bottom | تنظیم حاشیه پایینی بیرونی قاب تعیین مکان. |
| clip | عناصر قرارگیری مطلق را برش دهید. |
| left | تنظیم حاشیه چپ جعبه قرارگیری. |
| position | تعیین نوع قرارگیری عنصر. |
| right | تنظیم حاشیه راست جعبه قرارگیری. |
| top | تنظیم حاشیه بالای جعبه قرارگیری. |
| z-index | تنظیم ترتیب قرارگیری عناصر. |
خواندن بیشتر
کتاب درسی:مطالعه مختصر در مورد تعیین مکان CSS
کتاب درسی:تعیین مکان نسبی CSS
کتاب درسی:تعیین مکان مطلق CSS
- صفحه قبل max-width CSS
- صفحه بعدی z-index CSS
