ویژگی CSS position به کنترل موقعیت یک عنصر در صفحه وب کمک می‌کند. ویژگی‌های top، bottom، right و left برای کنترل موقعیت دقیق عنصر در صفحه استفاده می‌شوند. آن‌ها مکان دقیق یک عنصر را نسبت به لبه‌های آن مشخص می‌کنند.
ویژگی position می‌تواند برای ایجاد عناصر شناور، نوار کناری شناور و ویژگی‌های تعاملی دیگر استفاده شود.
مقادیر ممکن:
static: عنصر بر اساس جریان پیش‌فرض یا عادی صفحه مکان‌گیری می‌شود. بنابراین اگر مقادیر left/right/top/bottom/z-index را تنظیم کنیم، تأثیری بر روی عنصر نخواهد داشت.relative: موقعیت اصلی عنصر مطابق با جریان عادی صفحه است مانند مقدار static. اما حالا مقادیر left/right/top/bottom/z-index کار خواهند کرد. ویژگی‌های موقعیتی عنصر را از موقعیت اصلی در آن جهت فشار می‌دهد.absolute: عنصر کاملاً از جریان سند حذف می‌شود. سپس نسبت به بلوک محتوایی خود قرار می‌گیرد و لبه‌های آن با استفاده از ویژگی‌های side-offset قرار داده می‌شوند. یک عنصر با موقعیت دقیق ممکن است با سایر عناصر همپوشانی داشته باشد یا با آن‌ها همپوشانی داشته باشد.fixed: موقعیت ثابت عنصر دقیقاً مانند موقعیت مطلق است، به استثنای اینکه بلوک محتوایی عنصر ثابت همیشه پنجره نمایش است. در اینجا عنصر کاملاً از جریان سند حذف می‌شود و موقعیتی نسبت به هیچ بخشی از سند ندارد.sticky: عنصر به بالای شاخه مجاور پوزیشن‌دار خود که دارای “مکانیسم پیمایش” است، چسبیده می‌شود.
اعمال به: همه عناصر.
سینتکس:
position: static | relative | absolute | fixed | sticky;static Value
وقتی از ویژگی position: static استفاده می‌شود، عنصر به طور عادی در جریان سند قرار می‌گیرد. ویژگی‌های left، right، top، bottom و z-index بر روی عنصر تأثیری نخواهند داشت. این مقدار پیش‌فرض است.
<!DOCTYPE html>
<html>
<head>
<style>
.normal-box {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.static-box {
display: inline-block;
position: static;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="static-box">
<h2>Position: static</h2>
<p>This is a box with static position.</p>
</div>
</body>
</html>در این مثال، دو مستطیل نمایش داده شده‌اند. مستطیل اول با کلاس normal-box دارای ویژگی‌های ظاهری است و موقعیتش با استفاده از ویژگی position: static به صورت پیش‌فرض (بدون تغییر) است. در حالی که مستطیل دوم با کلاس static-box دارای همان ویژگی‌های ظاهری است، اما به صورت صریح مقدار position: static را دارد که همان موقعیت پیش‌فرض است و تأثیری بر موقعیت عنصر ندارد.
relative Value
وقتی از خاصیت position: relative استفاده می‌شود، عناصر نسبت به موقعیت اولیه‌شان در صفحه قرار می‌گیرند. می‌توانید از ویژگی‌های left، right، top و bottom برای حرکت دادن عنصر استفاده کنید، اما همچنان فضایی را در جریان سند اشغال می‌کنند.
<!DOCTYPE html>
<html>
<head>
<style>
.normal-box {
display: inline-block;
background-color: #f2c3ee;
border: 1px solid #000000;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 100px;
}
.relative-box {
display: inline-block;
position: relative;
left: 30px;
background-color: #bbedbb;
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a normal box.</p>
</div>
<div class="relative-box">
<h2>Position: relative</h2>
<p>This is a box with relative position.</p>
</div>
</body>
</html>در این مثال، دو مستطیل نمایش داده شده‌اند. مستطیل اول با کلاس normal-box دارای ویژگی‌های ظاهری است و موقعیتش با استفاده از ویژگی position: static به صورت پیش‌فرض (بدون تغییر) است. در حالی که مستطیل دوم با کلاس relative-box دارای همان ویژگی‌های ظاهری است، اما با استفاده از position: relative، به صورت نسبی نسبت به موقعیت اولیه خود در صفحه قرار می‌گیرد و به اندازه 30 پیکسل به سمت راست منتقل می‌شود.
absolute Value
وقتی از مقدار position: absolute استفاده می‌شود، عنصر از جریان سند خارج شده و نسبت به نزدیک‌ترین پدر موقعیت‌دار خود (در صورت وجود) موقعیت‌بندی می‌شود. اگر هیچ پدر موقعیت‌داری وجود نداشته باشد، عنصر نسبت به نمایشگر موقعیت‌بندی می‌شود.
می‌توانید از ویژگی‌های top، right، bottom و left برای مشخص کردن موقعیت عنصر نسبت به بلوک محتوایی‌اش استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<style>
.normal-box {
background-color: #f2c3ee;
border: 1px solid #333;
padding: 10px;
margin-bottom: 20px;
width: 350px;
height: 100px;
}
.absolute-box {
background-color: #bbedbb;
border: 1px solid #333;
padding: 10px;
position: absolute;
width: 300px;
height: 100px;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="normal-box">
<h2>Normal Box</h2>
<p>This is a Normal box.</p>
<div class="absolute-box">
<h2>Position: Absolute</h2>
<p>This is a box with absolute position.</p>
</div>
</div>
</body>
</html>در این مثال، یک مستطیل نرمال با کلاس normal-box ایجاد شده است که موقعیتش به صورت معمولی در جریان سند است. درون این مستطیل، یک مستطیل دیگر با کلاس absolute-box قرار دارد که با استفاده از position: absolute از جریان سند خارج شده و نسبت به مستطیل پدرش (که موقعیت‌دار است) موقعیت‌بندی شده است. با استفاده از ویژگی‌های left و bottom، موقعیت این مستطیل نسبت به مستطیل پدرش تعیین شده است.
fixed Value
وقتی از مقدار position: fixed استفاده می‌شود، عنصر در همان مکان روی صفحه باقی می‌ماند حتی زمانی که کاربر صفحه را اسکرول می‌کند. سپس می‌توانید از ویژگی‌های left، right، top و bottom برای قرار دادن عنصر در مکان مورد نظر استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<style>
.position_container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.fixed-position {
position: fixed;
top: 15px;
left: 60px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="position_container">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="fixed-position">Tutorialspoint CSS Position Fixed</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>در این مثال، یک مستطیل با کلاس position_container ایجاد شده است که اندازه آن مشخص شده و از حالت اسکرول برخوردار است. درون این مستطیل، یک پاراگراف با کلاس fixed-position و مقدار position: fixed قرار دارد که به صورت ثابت در موقعیت مشخص شده (15 پیکسل از بالا و 60 پیکسل از چپ) نمایش داده می‌شود. حتی زمانی که صفحه اسکرول می‌شود، موقعیت این پاراگراف ثابت باقی می‌ماند و از نوار اسکرول تحت تاثیر نمی‌باشد.
sticky Value
وقتی از مقدار position: sticky استفاده می‌شود، می‌توانید یک عنصری ایجاد کنید که هنگامی که کاربر از صفحه می‌گذرد، به بالای مشاهده‌گر (viewport) متصل می‌شود.
خاصیت position: sticky ترکیبی از خاصیت‌های position: relative و position: fixed است.
<!DOCTYPE html>
<html>
<head>
<style>
.position_container {
width: 400px;
height: 200px;
background-color: #f2c3ee;
overflow: auto;
padding: 5px;
}
.sticky-position {
position: sticky;
top: 15px;
padding: 5px;
background-color: #bbedbb;
text-align: center;
}
</style>
</head>
<body>
<div class="position_container">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="sticky-position">Tutorialspoint CSS Position Sticky</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>در این مثال، محتویات داخل یک مستطیل با کلاس position_container قرار دارد که دارای ابعاد و پس‌زمینه‌ای مشخص است. درون این مستطیل، یک متن با کلاس sticky-position و مقدار position: sticky قرار دارد که هنگامی که کاربر از محتویات مستطیل عبور می‌کند، به بالای مشاهده‌گر متصل می‌شود.
Positioning Text In an Image
در این مثال، از ویژگی position: absolute برای قرار دادن متن در جهت‌های مختلف استفاده شده است. المان‌های متن به انتهای بالا سمت چپ، بالا سمت راست، پایین سمت چپ و پایین سمت راست قرار داده شده‌اند.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
border: 2px solid #ef2c2c;
}
.center {
position: absolute;
top: 45%;
width: 100%;
text-align: center;
}
.top-left {
position: absolute;
top: 12px;
left: 30px;
}
.top-right {
position: absolute;
top: 12px;
right: 30px;
}
.bottom-left {
position: absolute;
bottom: 12px;
left: 30px;
}
.bottom-right {
position: absolute;
bottom: 12px;
right: 30px;
}
img {
width: 100%;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="images/red-flower.jpg" alt="abc" width="1000px" height="350px">
<h3 class="center">Text at Centered</h3>
<h3 class="top-left">Text at Top Left</h3>
<h3 class="top-right">Text at Top Right</h3>
<h3 class="bottom-left">Text at Bottom Left</h3>
<h3 class="bottom-right">Text at Bottom Right</h3>
</div>
</body>
</html>در این کد، یک <div> با کلاس container ایجاد شده است که حاوی یک <img> و چند المان <h3> با کلاس‌های مختلف است. با استفاده از position: absolute و تعیین موقعیت top و left یا right، متن در جهت‌های مختلف قرار داده شده است.
Related Properties
در این بخش، مجموعه‌ای از ویژگی‌های CSS مرتبط با موقعیت مورد بررسی قرار دارد. این ویژگی‌ها از جمله ویژگی‌هایی هستند که با استفاده از آن‌ها می‌توانید موقعیت المان‌ها را در صفحه وب کنترل کنید.
در ادامه، توضیحاتی کوتاه در مورد هر یک از این ویژگی‌ها آمده است:
- bottom: از این ویژگی با ویژگی position برای قرار دادن لبه پایینی یک المان استفاده می‌شود.
- clip: این ویژگی ماسک کلیپ را برای یک المان تعیین می‌کند.
- left: با استفاده از این ویژگی همراه با ویژگی position می‌توانید لبه چپ یک المان را قرار دهید.
- overflow: این ویژگی تعیین می‌کند که چگونه محتوای اضافی نمایش داده شود.
- position: این ویژگی مدل موقعیت‌دهی را برای یک المان تعیین می‌کند.
- right: با استفاده از این ویژگی همراه با ویژگی position می‌توانید لبه راست یک المان را قرار دهید.
- top: این ویژگی مدل موقعیت‌دهی را برای یک المان تعیین می‌کند.
- vertical-align: این ویژگی موقعیت عمودی یک المان را تعیین می‌کند.
- z-index: این ویژگی لایه رندرینگ برای المان فعلی را تعیین می‌کند.
این ویژگی‌ها به شما امکان می‌دهند تا المان‌های خود را با دقت بیشتری در صفحه وب قرار دهید و سبک‌بندی مناسبی برای آن‌ها انجام دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام