۳۰
مهر

جلسه ۲۰ : position در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

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

ویژگی position در CSS

ویژگی position در CSS دارای ۵ وضعیت مختلف است که در این آموزش به آن می پردازیم.

کار با position در CSS

ویژگی position در CSS روش موقعیتی یک عنصر را در یک صفحه وب مشخص می کند.

این ویژگی شامل ۵ وضعیت زیر است:

static
relative
fixed
absolute
sticky

ویژگی position در CSS در واقع به همراه تعریف ویژگی های top, bottom, left و right موقعیت یک عنصر را در صفحه وب مشخص می کند.

البته بسته به استفاده از هر یک از وضعیت های position، حالت متفاوتی برای عنصر ایجاد می شود.

وضعیت position: static

در حالت پیش فرض position عناصر در حالت static تعریف شده است.

عناصری که position آنها برابر با static است، با تعیین مقادیر top, bottom, left و right تحت تاثیر قرار نمی گیرند.

یک عنصر با ویژگی position: static; به هیچ وجه موقعیت خاصی نداشته و با توجه به جریان عادی صفحه وب نمایش داده می شود.

ویژگی position در CSS -حالت استاتیک

کد CSS ایجاد DIV تصویر فوق به صورت زیر است:

مثال : مقدار static

div.static {
    position: static;
    border: 3px solid #73AD21;
}

div.static {

position: static;

border: 3px solid #73AD21;

}

خودتان امتحان کنید »

وضعیت position: relative

در یک عنصر با ویژگی position: relative; موقعیت آن نسبت به موقعیت عادی تعیین می شود.

This <div> element has position: relative;

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

مثال : حالت relative

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

div.relative {

position: relative;

left: 30px;

border: 3px solid #73AD21;

}

خودتان امتحان کنید »

حالت position: fixed

موقعیت یک عنصر با حالت position: fixed; نسبت به viewport مرورگر تنظیم می شود.

این به این معنی است که با تعیین ویژگی های top, right, bottom و left عنصر مربوطه در محل خود ثابت شده و حتی با اسکرول کردن صفحه وب جا به جا نمی شود.

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

مثال : حالت fixed

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

div.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 3px solid #73AD21;

}

خودتان امتحان کنید »

حالت position: absolute

موقعیت یک عنصر با ویژگی position: absolute; نسبت به عناصر والد خود در صفحه وب تعیین می شود.

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

نکته : یک عنصر که نسبت به عنصر والد خود موقعیت دهی شده باشد، نسب به عنصر والد خود ثابت است.

This <div> element has position: relative;

This <div> element has position: absolute;

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

مثال : حالت absolute

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

}

خودتان امتحان کنید »

وضعیت position: sticky

موقعیت یک عنصر با ویژگی position: sticky; نسبت به اسکرول کردن کاربر تعیین می شود.

حالت sticky در واقع بین وضعیت های relative و fixed تعویض می شود. و این بستگی به محل اسکرول دارد.

کار با position در CSS -وضعیت sticky

کار با position در CSS -وضعیت sticky -نتیجه

نکته:

مرورگرهای Internet Explorer, Edge 15 و نسخه های قدیمی تر از وضعیت sticky پشتیبانی نمی کنند.
مرورگر Safari نیز برای پشتیبانی از sticky احتیاج به پیشوند -webkit- دارد.
شما همچنین باید یکی از ویژگی های top, right, bottom یا left را برای عمل کردن sticky تعیین کنید.

در مثال زیر عنصری که وضعیت sticky دارد با رسیدن به بالای صفحه (top:0) ثابت (fixed) می شود:

مثال : حالت sticky

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

div.sticky {

position: -webkit-sticky; /* Safari */

position: sticky;

top: 0;

background-color: green;

border: 2px solid #4CAF50;

}

خودتان امتحان کنید »

همپوشانی عناصر

بعد از موقعیت دهی عناصر، می توان آن ها را روی یکدیگر قرار دارد.

دستور z-index ترتیب قرار گیری عناصر روی یکدیگر را تعیین می کند.

یک عنصر می تواند در جلو یا پشت عناصر دیگر قرار بگیرد.

ویژگی position در CSS -همپوشانی

کد CSS تصویر فوق به صورت زیر خواهد بود:

مثال : همپوشانی عناصر

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

خودتان امتحان کنید »

نکته : یک عنصر با مقدار z-index بیشتر همیشه روی عنصری با z-index کمتر قرار می گیرد.

موقعیت دهی متن در Image

حالا با استفاده از وضعیت های position در CSS می توان یک متن را در محل های دلخواه روی تصویر قرار داد.

تنظیم متن در بالا و سمت چپ تصویر

کار با position در CSS -موقعیت بالا و چپ

کد CSS حالت فوق:

مثال : بالا و چپ

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top left corner:</p>

</div>

</body>

</html>

خودتان امتحان کنید »

تنظیم متن در بالا و سمت راست تصویر

کار با position در CSS -موقعیت بالا و راست

کد CSS حالت فوق:

مثال : بالا و راست

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top right corner:</p>

<div class="topright">Top Right</div>

</div>

</body>

</html>

خودتان امتحان کنید »

تنظیم متن در پایین و سمت چپ تصویر

کار با position در CSS -موقعیت پایین و چپ

کد CSS حالت فوق:

مثال : پایین و چپ

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

.bottomleft {

position: absolute;

bottom: 8px;

left: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the bottom left corner:</p>

<div class="bottomleft">Bottom Left</div>

</div>

</body>

</html>

خودتان امتحان کنید »

تنظیم متن در پایین و سمت راست تصویر

کار با position در CSS -موقعیت پایین و راست

مثال : پایین و راست

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

.bottomright {

position: absolute;

bottom: 8px;

right: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the bottom right corner:</p>

<div class="bottomright">Bottom Right</div>

</div>

</body>

</html>

خودتان امتحان کنید »

تنظیم متن در مرکز تصویر

کار با position در CSS -موقعیت مرکز

مثال : تنظیم در مرکز

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

.center {

position: absolute;

left: 0;

top: 50%;

width: 100%;

text-align: center;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="center">Centered</div>

</div>

</body>

</html>

خودتان امتحان کنید »

کلام آخر

هر کدام از عناصر HTML در صفحه وب موقعیت خاص خود را دارند، که در صورت عدم تنظیم آن از وضعیت پیش فرض استفاده می شود، در این بخش ما شما را با وضعیت های مختلف position در CSS آشنا کردیم تا بر حسب نیاز خود موقعیت های مختلف را در عناصر HTML خود تعریف کنید.

به اشتراک بگذارید

موقعیت عناصر در css ,ویژگی position در CSS

دیدگاه کاربران

تعداد دیدگاه : 7

علی اصغر
بهمن ۳۰, ۱۳۹۷
بسیار عالی بود توضیحات با یکبار خواندن متوجه شدم.
پاسخ دادن
- mohsen11astane
  بهمن ۱۲, ۱۳۹۸
  مرسی علی آقا که توی بحث شرکت کردید و نظرتون رو قرار دادید
  پاسخ دادن
mohsen11astane
بهمن ۱۲, ۱۳۹۸
مبحث پوزیشنین واقعا یک مبحث فوق العاده مهم در طراحی صفحات وب هست. ما باید بدونیم هر عنصر (چه عناصر اینلاین لول – inline-level – چه عناصر بلاک لول – block-level – چه عناصر اینلاین بلاک لول – inline-block-level – و چه عناصر تیبل لول – table-level -) با توجه به استایل هایی که بهش میدیم چه نوع واکنشی از خودش در صفحه بروز میده. مثلا توی مثال دوم همین صفحه که مربوط به پوزیشن رلتیو هست شما باید بدونید وقتی که عنصر مد نظر عرضی نداشته باشه و بهش widthی نداده باشی و پوزیشن رلتیو بهش بدی و بعد از بالا چپ راست و پایین بهش فاصله ای رو اختصاص بدی چه واکنشی از خودش بروز میده. اگر بهش widthی رو اختصاص دادی و استایل های بالا رو بهش دادی چجور واکنشی نشون میده. اگر متنت انگلیسی باشه مطمنا دایرکشن صفحه لفت تو رایت – left to right – هست و اگه متنت فارسی باشه جهت نوشتن صفحه رایت تو لفت – right to left – هست. با توجه به این خصوصیت دایرکشن اگه از چپ یا راست فاصله ای رو در نظر بگیری چیزی که در نهایت مشاهده می کنی کاملا عکس هم هستن. اگر marginشو auto قرار بدی یجور رفتار خاص رو بهت نشون میده و وسط چین می کنه و حالا اگه بیای یه left:30px بدی با توجه به فارسی بودن صفحه در صورتی که هیچ عرضی رو برای تگ دیو قرار نداده باشی از سمت چپ ۳۰ پیکسل فاصله می گیره که این باعث میشه قسمتی از نوشته ها از راست صفحه خارج بشه و چند کلمه داخلش خونده نشه. اگه عرضی رو اختصاص بدی مثلا ۵۰۰px از سمت چپ ۳۰ پیکسل فاصله می گیره و اون حالت مارجین autoش کلا بهم میریزه و باید استایل های مختلف داد تا ببینی چه نتیجه ای در صفحه از خودش بروز میده و این استایل ها برای پوزیشن های absolute و fixed شدیدتر هستند نسبت به پوزیشن رلتیو و …
پاسخ دادن
mohsen11astane
بهمن ۱۲, ۱۳۹۸
معمولا برای پوزیشن های absolute هیچ معنی ای ندارد که موقعیت آنها را نسبت به تگ بادی قرار بدهیم. این در صورتی است که به عنصر والد آن پوزیشن رلتیو را نسبت نداده باشیم چون موقعیت دهی این عناصر نسبت به اولین تگ والد خود در صفحه هست که پوزیشن غیر استاتیک داشته باشد که معمولا از پوزیشن ابسولوت استفاده می شود. درست و اصولی این است که برای تگ والد آنها پوزیشن رلتیو و پوزیشن خود آن عنصر را ابسولوت قرار دهیم که در این صورت موقعیت دهی آن نسبت به خود والد آن در نظر گرفته می شود.
پاسخ دادن
mohsen11astane
بهمن ۱۲, ۱۳۹۸
دمت گرم دادو مرسی
پاسخ دادن
shahla
مرداد ۲۹, ۱۴۰۰
پس چرا من این درس رو نفهمیدم :/
پاسخ دادن
- صادق
  مرداد ۳۰, ۱۴۰۰
  اگر مشکلی هست در خدمتم
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۰ : position در CSS

مقدمه

ویژگی position در CSS

کار با position در CSS

وضعیت position: static

وضعیت position: relative

حالت position: fixed

حالت position: absolute

وضعیت position: sticky

همپوشانی عناصر

موقعیت دهی متن در Image

تنظیم متن در بالا و سمت چپ تصویر

تنظیم متن در بالا و سمت راست تصویر

تنظیم متن در پایین و سمت چپ تصویر

تنظیم متن در پایین و سمت راست تصویر

تنظیم متن در مرکز تصویر

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ