آموزش CSS - موقعیت(positioning)

موقعیت (position) در CSS به تغییر موقعیت یک عنصر در صفحه وب کمک می‌کند. ویژگی‌های top، bottom، right و left برای کنترل موقعیت دقیق عنصر در صفحه استفاده می‌شوند. این‌ها فاصله های یک عنصر از لبه‌هایش را مشخص می‌کنند.

موقعیت (position) می‌تواند برای ایجاد عنصر‌های شناور، نوار کناری شناور و ویژگی‌های تعاملی دیگر استفاده شود.

مقادیر ممکن عبارتند از:

static : این نوع موقعیت، عنصر را بر اساس ترتیب معمول صفحه قرار می‌دهد. اگر ویژگی‌هایی مانند left/right/top/bottom/z-index تعیین شوند، تأثیری بر روی موقعیت عنصر نخواهد داشت.
relative : موقعیت اصلی عنصر مشابه static است، اما با تنظیم left/right/top/bottom/z-index، موقعیت عنصر نسبت به مکان اصلی خود تغییر می‌کند.عنصرهای نسبی موقعیت خود را نسبت به موقعیت اصلی خود یا نسبت به عنصروالد (parent) تعیین می‌کنند. به عبارت دیگر، موقعیت عنصر نسبت به موقعیت اصلی یا عنصر والد تغییر می‌کند.
absolute : در این نوع موقعیت، عنصر کاملاً از جریان اصلی صفحه خارج شده و به موقعیت خود نسبت به بلوکی که در آن قرار دارد موقعیت داده می‌شود به عبارت دیگر عنصرهای مطلق نسبت به عنصر والد (parent) خود یا نسبت به محدوده مشخصی که در آن قرار دارند، موقعیت داده می‌شوند. این عنصرها با اسکرول کردن صفحه حرکت نمی‌کنند و موقعیت آنها بر اساس مختصات نسبی به والد خود یا به محدوده مشخص تعیین می‌شود.
fixed : برای تعیین یک عنصر به عنوان عنصر ثابت (fixed element) استفاده می‌شود.عنصرهای ثابت، در صفحه نمایش ثابت می‌مانند و با حرکت صفحه یا اسکرول، موقعیت آنها تغییر نمی‌کند. به عبارت دیگر،عنصر با ویژگی fixed معمولاً در بالای صفحه نمایش قرار می‌گیرد و هنگام اسکرول کردن صفحه، ثابت می‌ماند.
sticky: این ویژگی به عنوان یک نوع ترکیبی از موقعیت‌های fixed و relative عمل می‌کند.زمانی که یک عنصر را با استفاده از sticky استایل می‌دهید، عنصر به طور اولیه مانند یک عنصر با موقعیت‌دهی نسبی (relative) عمل می‌کند و در جای خود قرار می‌گیرد. اما، هنگامی که کاربر به یک نقطه اسکرول می‌کند که عنصر درآن نقطه قرار گرفته است ، عنصر به موقعیت fixed تغییر می‌کند و به ثابت شدن در آن نقطه ادامه می‌دهد تا زمانی که کاربر به انتهای عنصربرسد.

استاتیک

این نوع موقعیت، عنصر را بر اساس ترتیب معمول صفحه قرار می‌دهد. اگر ویژگی‌هایی مانند left/right/top/bottom/z-index تعیین شوند، تأثیری بر روی موقعیت عنصر نخواهد داشت.

مثال

<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>

نسبی (Relative)

موقعیت اصلی عنصر مشابه static است، اما با تنظیم left/right/top/bottom/z-index، موقعیت عنصر نسبت به مکان اصلی خود تغییر می‌کند.عنصرهای نسبی موقعیت خود را نسبت به موقعیت اصلی خود یا نسبت به عنصروالد (parent) تعیین می‌کنند. به عبارت دیگر، موقعیت عنصر نسبت به موقعیت اصلی یا عنصر والد تغییر می‌کند.

مثال

<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>

مطلق (Absolute)

در این نوع موقعیت، عنصر کاملاً از جریان اصلی صفحه خارج شده و به موقعیت خود نسبت به بلوکی که در آن قرار دارد موقعیت داده می‌شود به عبارت دیگر عنصرهای مطلق نسبت به عنصر والد (parent) خود یا نسبت به محدوده مشخصی که در آن قرار دارند، موقعیت داده می‌شوند. این عنصرها با اسکرول کردن صفحه حرکت نمی‌کنند و موقعیت آنها بر اساس مختصات نسبی به والد خود یا به محدوده مشخص تعیین می‌شود

مثال

<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: relative;
      width: 300px;
      height: 100px;
      left: 20px;
      bottom: 20px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a Noraml box.</p>
      <div class="absolute-box">
         <h2>Position: Absolute</h2>
         <p>This is a box with absolute position.</p>
      </div>
   </div>
</body>
</html>

ثابت (Fixed)

برای تعیین یک عنصر به عنوان عنصر ثابت (fixed element) استفاده می‌شود.عنصرهای ثابت، در صفحه نمایش ثابت می‌مانند و با حرکت صفحه یا اسکرول، موقعیت آنها تغییر نمی‌کند. به عبارت دیگر،عنصر با ویژگی fixed معمولاً در بالای صفحه نمایش قرار می‌گیرد و هنگام اسکرول کردن صفحه، ثابت می‌ماند.

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

مثال

<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>

چسبیده (Sticky)

این ویژگی به عنوان یک نوع ترکیبی از موقعیت‌های fixed و relative عمل می‌کند.زمانی که یک عنصر را با استفاده از sticky استایل می‌دهید، عنصر به طور اولیه مانند یک عنصر با موقعیت‌دهی نسبی (relative) عمل می‌کند و در جای خود قرار می‌گیرد. اما، هنگامی که کاربر به یک نقطه اسکرول می‌کند که عنصر درآن نقطه قرار گرفته است ، عنصر به موقعیت fixed تغییر می‌کند و به ثابت شدن در آن نقطه ادامه می‌دهد تا زمانی که کاربر به انتهای عنصربرسد.

مثال

<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>

قرارگیری متن با استفاده از موقعیت در یک تصویر با CSS

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

مثال

<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>

ویژگی‌های مرتبط با موقعیت در CSS

در زیر لیستی از تمام ویژگی‌های CSS مرتبط با موقعیت (position) آمده است:

ویژگی	توضیحات
position	مدل موقعیت‌یابی برای یک عنصر را تعیین می‌کند.
clip	در CSS، ویژگی clip دیگر پیشنهاد نمی‌شود و به عنوان یک ویژگی قدیمی و قدیمی تلقی می‌شود.این ویژگی از CSS3 حذف شده است،ازاین ویژگی برای کنترل ناحیه‌ای از یک عنصر مورد استفاده قرار می‌گرفت. با استفاده از این ویژگی، می‌توانستید یک قسمت از عنصر را نمایش دهید یا مخفی کنید.ولی در صورتی که نیاز به کنترل مختصات یک عنصر دارید، بهتر است از ویژگی‌های جدیدتر مانند position, top, right, bottom, و left استفاده کنید. این ویژگی‌ها امکان کنترل دقیق‌تر و بهتری بر روی مختصات عنصرها را فراهم می‌کنند. ;clip: rect(top, right, bottom, left)
left	ویژگی left در CSS برای تنظیم موقعیت افقی (چپ به راست) یک عنصر مورد استفاده قرار می‌گیرد. با استفاده از این ویژگی، می‌توانید موقعیت چپی (از چپ به راست) عنصر را نسبت به موقعیت اولیه‌اش یا نسبت به عنصروالد تعیین کنید. length: مقدار طولی مانند px, em و ... percentage: مقدار درصدی نسبت به ابعاد عنصر والد. auto: مقدار auto به مرورگر اجازه می‌دهد که مقدار مربوطه را به صورت خودکار و بر اساس مفهوم مربوطه تعیین کند. مقادیر مثبت و منفی: مقادیر مثبت: عنصر به سمت راست حرکت می‌کند. مقادیر منفی: عنصر به سمت چپ حرکت می‌کند
top	ویژگی top برای تعیین موقعیت عمودی (بالا به پایین) یک عنصر استفاده می‌شود. این ویژگی معمولاً با استفاده از مقادیر مثبت و منفی، موقعیت عمودی عنصر نسبت به موقعیت اولیه‌اش یا نسبت به عنصر والد خود تعیین می‌شود. length: مقدار طولی مانند px, em, و ... percentage: مقدار درصدی نسبت به ابعاد عنصر والد. auto: مقدار auto به مرورگر اجازه می‌دهد که مقدار مربوطه را به صورت خودکار و بر اساس مفهوم مربوطه تعیین کند. مقادیر مثبت و منفی: مقادیر مثبت: عنصر به سمت پایین حرکت می‌کند. مقادیر منفی: عنصر به سمت بالا حرکت می‌کند
bottom	ویژگی bottom در CSS برای تنظیم موقعیت عمودی (بالا به پایین) یک عنصر مورد استفاده قرار می‌گیرد. با استفاده از این ویژگی، می‌توانید موقعیت پایینی (از پایین به بالا)عنصر را نسبت به موقعیت اولیه‌اش یا نسبت به عنصر والد تعیین کنید. length: مقدار طولی مانند px, em, و ... percentage: مقدار درصدی نسبت به ابعاد عنصر والد. auto: مقدار auto به مرورگر اجازه می‌دهد که مقدار مربوطه را به صورت خودکار و بر اساس مفهوم مربوطه تعیین کند. مقادیر مثبت و منفی: مقادیر مثبت: عنصر به سمت بالا حرکت می‌کند. مقادیر منفی: عنصر به سمت پایین حرکت می‌کند
right	ویژگی right در CSS برای تنظیم موقعیت افقی (راست به چپ) یک عنصر مورد استفاده قرار می‌گیرد. با استفاده از این ویژگی، می‌توانید موقعیت راستی (از راست به چپ) عنصر را نسبت به موقعیت اولیه‌اش یا نسبت به عنصر والد تعیین کنید. length: مقدار طولی مانند px, em و ... percentage: مقدار درصدی نسبت به ابعاد عنصر والد. auto: مقدار auto به مرورگر اجازه می‌دهد که مقدار مربوطه را به صورت خودکار و بر اساس مفهوم مربوطه تعیین کند. مقادیر مثبت و منفی: مقادیر مثبت: عنصر به سمت چپ حرکت می‌کند. مقادیر منفی: عنصر به سمت راست حرکت می‌کند
overflow	نحوه نمایش محتوای بیش از حد را تعیین می‌کند.
vertical-align	موقعیت عمودی یک عنصر را تعیین می‌کند.
z-index	ویژگی z-index برای تعیین ترتیب اولویت نمایش عنصرها در یک صفحه مورد استفاده قرار می‌گیرد. این ویژگی به ترتیب لایه (z-axis) عنصرها بر روی صفحه نمایش اشاره دارد و به ترتیب از کم به زیاد یا از زیاد به کم مشخص می‌کند که کدام عنصرها باید بالاتر یا پایین‌تر نمایش داده شود.

قابلیت مشاهده(visibility) - درس قبلی

درس بعدی - لایه های(layers)