خصوصیت position در css

ویژگی position نوع موقعیت قرارگیری عناصر را در صفحه مشخص می کند(با استفاده از مقادیر static relative, fixed, absolute , sticky).

سپس عناصر با استفاده از ویژگی های بالا(top)، پایین(bottom)، چپ(left) و راست(right) قرار می گیرند. با این حال، این خواص کار نخواهند کرد، مگر اینکه ویژگی موقعیتی برای اولین بار تنظیم شود. آنها نیز بسته به مقدار موقعیت، متفاوت عمل می کنند.

;position: static

عناصر HTML به طور پیش فرض به صورت static قرار دارند. عناصر موقعیت static توسط ویژگی های top، bottom، left و right تحت تاثیر قرار نمی گیرند. عنصر با موقعیت static همواره با توجه به جریان عادی صفحه نمایش داده می شود.

div.static {
    position: static;
    left: 30px;
    border: 3px solid #73AD21;
}
<div class="static">
This div element has position: static;
</div>

خروجی :

This div element has position: static;

;position: relative

با قرار دادن عناصر با موقعیت relative می توانیم با تنظیم مقادیر to , bottom , left و right آنها را جابجا کنیم.

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
<div class="relative">
This div element has position: relative;
</div>

خروجی :

This div element has position: relative;

;position: fixed

عنصر با موقعیت fixed موقعیت خود را نسبت به نمایشگر تعیین می کند بدین معنی که همیشه در همان مکان که تعیین شده است باقی می ماند و با اسکرول شدن صفحه و بالا و پایین بردن صفحه مو قعیت آن تغییری نمی کند و در همان جا باقی می ماند. از خصوصیات top، right، bottom و left برای قرار دادن عنصر استفاده می شود.

div.relative {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
<div class="fixed">
This div element has position: fixed;
</div>
This div element has position: fixed;

;position: absolute

عنصر با موقعیت absolute نسبت به نزدیکترین اجداد خود که موقعیت relative دارد موقعیت خود را تعیین می کند. با مقدار دهی به خصوصیات top, bottom, right و left جایگاه آن را درون باکس پدر خود را تعیین می کنیم.

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
<div class="relative">This div element has position: relative;
    <div class="absolute">This div element has position: absolute;</div>
</div>

خروجی :

This div element has position: relative;
This div element has position: absolute;

z-index

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

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

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

خروجی :

رابط کاربری (UI) چیست ؟
شاید این مطلب را نیز بپسندید

This is a heading

آموزش CSS (بخش دوازدهم) 1

Because the image has a z-index of -1, it will be placed behind the text.

خصوصیت Overflow در css

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

خاصیت overflow دارای مقادیر زیر است:

  • – visible : این مقدار که پیش فرض نیز می باشد محتوا را در خارج از جعبه عنصر نشان میدهد.
  • – hidden : محتوای خارج از جعبه عنصر را غیر قابل مشاهده می کند.
  • – scroll : محتوای خارج از جعبه عنصر را یک اسکرول اضافه می کند تا بقیه محتوا را مشاهده کنید(فقط اسکرول افقی اضافه میکند).
  • – auto : مشابه scroll عمل می کند، اما در صورت نیاز یک اسکرول عمودی نیز اضافه می کند.

;overflow: visible

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

;overflow: hidden

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

;overflow: scroll

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: scroll;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

;overflow: auto

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: scroll;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
آموزش CSS (بخش سیزدهم)