سبد خرید (0)

خاصیت position در CSS

خاصیت Position در CSS

Wiki

موقعیت عناصر در صفحه، بعضی مواقع فریب دهنده است!


کدام عنصر، جلو نمایش داده شود!


عناصر می توانند روی یکدیگر قرار بگیرند!


موقعیت عناصر HTML در صفحه

Wiki

خصوصیات مربوط به موقعیت در CSS به شما اجازه می دهد تا موقعیت یک عنصر را تغییر داده(position)، یا مکان یک عنصر را پشت دیگر عناصر قرار دهید(z-index) و یا مشخص کنید، زمانی که محتوای یک عنصر خیلی بزرگ شد، چه اتفاقی بیافتد(overflow)

موقعیت عناصر در صفحه با خصوصیات top و bottom و left و یا right تنظیم می شود، اما این خصوصیات کار نخواهند کرد مگر اینکه ابتدا خصوصیت position تنظیم شود و همچنین خصوصیات ذکر شده با توجه به روش موقعیت دهی، به صورت متفاوت عمل خواهند کرد.

چهار روش مختلف برای موقعیت دهی یک عنصر وجود دارد:

  1. position:static - موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده می شود.
  2. position:fixed - موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییردهیم، در همان موقعیت قبلی باقی می ماند.
  3. position:relative - یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.
  4. position:absolute - موقعیت عنصر در هر مکانی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش داده می شود.

1- Static

Wiki

موقعیت عناصر HTML در صفحه، به صورت پیشفرض static است. اگر موقعیت یک عنصر با مقدار static تنظیم شود، همیشه مطابق جریان معمول نمایش داده می شود یا به عبارتی در همان جایی که کد آن قرار دارد نمایش داده می شود.

توجه: با تنظیم خصوصیت position با مقدار "static"، خصوصیات top و bottom و right و left اثری نخواهند داشت.


2- fixed

Wiki

یک عنصر با موقعیت ثابت(fixed) در واقع نسبت به پنجره مرورگر، موقعیت دهی می شود.

موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییر دهیم، در همان موقعیت قبلی باقی می ماند.

مثال (خاصیت position در CSS)

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
خودتان امتحان کنید »

توجه: مرورگرهای IE7 و IE8 در صورتی که یک DOCTYPE! در بالای صفحه تنظیم کرده باشیم این حالت را پشتیبانی می کنند.

عنصری که به صورت ثابت موقعیت دهی شده، در واقع از حالت عادی خارج شده است و در HTML عنصری که اینگونه رفتار کند وجود ندارد.


 3- Relative

Wiki

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

مثال (خاصیت position در CSS)

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
خودتان امتحان کنید »

عنصری که به صورت نسبی (Relative) موقعیت دهی شده است، می تواند روی دیگر عناصر قرار بگیرد، اما مکان عادی عنصر همچنان رزور شده باقی می ماند.

مثال (خاصیت position در CSS)

h2.pos_top
{
position:relative;
top:-50px;
}
خودتان امتحان کنید »

عنصری که به صورت نسبی موقعیت دهی شده باشد، اغلب به عنوان ظرفی برای عناصر absolute استفاده می شوند:

<div style="position: relative;">
  <p style="position: absolute; top: 0px; right: 0px;">----</p>
  <div style="position: absolute; top: 0px; left: 0px; z-index: 1;">
     ------
  </div>
</div>

4- Absolute

Wiki

یک عنصر نسبت به مکان والد خود موقعیت دهی می شود و اگر والدی وجود نداشت، نسبت به بلوک <html> موقعیت دهی خواهد شد.

مثال (خاصیت position در CSS)

h2
{
position:absolute;
left:100px;
top:150px;
}
خودتان امتحان کنید »

عنصری که به صورت Absolute موقعیت دهی می شود، در واقع از حالت عادی خارج شده است. و در HTML عنصری که اینگونه رفتار کند وجود ندارد.

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


روی هم قرار دادن عناصر (overlap)

Wiki

زمانی که موقعیت دهی عناصر، خارج از حالت عادی باشد، می توانند روی دیگر عناصر قرار بگیرند.

خصوصیت z-index ترتیب عناصر را مشخص می کند (کدام عنصر باید جلو یا پشت دیگر عناصر باشد)

مقدار این خصوصیت می تواند مثبت یا منفی باشد:

مثال (خاصیت position در CSS)

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
خودتان امتحان کنید »

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

توجه: اگر بدون اینکه خصوصیت z-index را تنظیم کرده باشیم، دو عنصر روی یکدیگر قرار بگیرند، عنصری که کد HTML آن بعد از دیگری آمده، بالاتر قرار خواهد گرفت.


مثال

مثال - خودتان امتحان کنید

Wiki

تنظیم شکل یک عنصر(شکل دهی)
این مثال نشان می دهد که چگونه شکل یک عنصر را تنظیم کنیم، عنصر کوتاهتر نمایش داده می شود.

چگونه با لبریز شدن (overflow) یک عنصر برخورد کنیم
این مثال نشان می دهد که چگونه خصوصیت overflow را برای ایجاد یک scroll bar تنظیم کنیم(برای زمانی که محتوای یک عنصر خیلی بزرگ است)

چگونه تنظیم کنیم که مرورگر به صورت اتوماتیک با overflow برخورد کند
این مثال نشان می دهد که چگونه مرورگر را تنظیم کنیم تا به صورت اتوماتیک با overflow برخورد کند.

تغییر مکان نما(cursor)
این مثال نشان می دهد که چگونه شکل مکان نما را تغییر دهیم.


کلیه خصوصیات مربوط به موقعیت دهی در CSS

Wiki

شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.

خصوصیتتوضیحاتمقادیرCSS
bottom فاصله لبه پایینی را برای یک box موقعیت دهی شده تنظیم می کند auto
length
%
inherit
2
clip

شکل یک عنصر که به صورت absolute موقعیت دهی شده است را کوتاه می کند

shape
auto
inherit
2
cursor

شکل مکان نما را مشخص می کند

url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left

فاصله لبه چپ را برای یک box موقعیت دهی شده تنظیم می کند

auto
length
%
inherit
2
overflow

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

auto
hidden
scroll
visible
inherit
2
position

نوع موقعیت دهی یک عنصر را مشخص می کند

absolute
fixed
relative
static
inherit
2
right

فاصله لبه راست را برای یک box موقعیت دهی شده تنظیم می کند

auto
length
%
inherit
2
top

فاصله لبه بالایی را برای یک box موقعیت دهی شده تنظیم می کند

auto
length
%
inherit
2
z-index

ترتیب نمایش یک عنصر را مشخص می کند (جلو یا پشت)

number
auto
inherit
2

دیدگاه‌ها  

+3 # negar حسنی 1394-08-30 18:04
سلام و خسته نباشید
من یه اسلایدر درست کردم و خاصیت پوزیشنش رو ریلیتیو زدم...حالا کار میکنه و عکسها رو پشت سر هم نشون میده ولی وسط صفحه نیست..سمت چپ ایستاده..چطوری بیارمش وسط صفحه؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-09-01 20:52
با سلام و خسته نباشید.
بستگی به تگ داره که عکس‌ها داخلش هست. بعضی جاها با خاصیت text-align:cent er وسط‌چین میشه، ولی بعضی جاها نیاز داره که margin:x auto بشه. یعنی مارجین‌ها از طرفین auto بشه. و ...
باید کدها رو دید تا بشه دقیق گفت باید چی کار کنید تا وسط‌چین بشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Milad 1394-07-29 01:51
با سلام خدمت اساتید محترم ،
آیا هیچ راهی هست که با css بشه صفت های عناصر رو برای موقعیت دهی همدیگه استفاده کرد ؟!
بطور مثال توی ویژوال بیسیک برای تنظیم موقعیت عناصر میشه نوشت :

text2.left=text1.left+10+text1.width

اگه امکانش نیست لطف کنید بگید بهترین راه برای موقعیت دهی عناصر صفحه چیه ؟! به خاطر نگه داشتن انداره و موقعیت همه عناصر خیلی سخت به نظر میاد .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-07-29 11:10
با سلام.
این کار با css سخت هست.
با استفاده از LESS تا حدودی میتونید عناصر رو بر اساس موقعیت عناصر دیگه بچینید. شاید این نیاز شما رو جواب بده.

عبارت use class in another class css رو در گوگل سرچ کنید و بعد عبارت LESS CSS رو در گوگل سرچ کنید.
(برای چیدمان دقیق شما نیاز به برنامه نویسی سمت کلاینت دارید. گر چه در less از جاوااسکریپت استفاده شده است.)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # hkh2015 1394-07-03 21:55
با سلام
می خواستم تشکر کنم از آقای پهلوان صادق و سایر دوستان که در نوشتن مطالب نقش دارند، امشب همین min-width بار بزرگی از دوش من برداشت. کلا از سایت شما مطالب زیادی آموختم.
بازم ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mohsen moardi 1393-12-08 10:36
فرق top و margin-top چيه؟يا left و margin-left? من تو مثال ها به جاي left ,ويژگي margin-left زدم فرقي نكرد...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-12-08 11:35
top: زمانی که از خصوصیت position با مقادیر "absolute" یا "relative" استفاده می کنید، top اثر خود را نشان خواهد داد. در غیر اینصورت اثری نخواهد داشت.
برای عناصری که مکان آن ها absolute است، ویژگی top لبه بالایی عنصر را نسبت به عنصر والدش، بالا یا پایین می برد و برای عناصری که مکان آن ها relative است، ویژگی top لبه بالایی عنصر را نسبت به مکان خودش، بالا یا پایین می برد. (www.beyamooz.com/cssref/227-css-properties/860)
margin-top: با استفاده از این خصوصیت می توان فاصله بالایی یک عنصر را نسبت به عنصر بالایی تنظیم کرد. (www.beyamooz.com/cssref/227-css-properties/834)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-05 21:13
سلام
لطفا بگید یک عنصر div یا img که با تغییر اندازه پنجره جابه جا میشه و سر جای خودش نمیمونه چیکار کنیم که ثابت بمونه ؟ همه position ها رو امتحان کردم ولی بازم حرکت میکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-12-06 07:16
سلام
اگر منظورتون اینه کا با اسکرول کردن صفحه، div یا img مورد نظر سر جای خودش ثابت بمونه، استایل زیر را روی آن اعمال نمایید:.your_div
{
position:fixed;
top:0;
right:0;
}

کد بالا، عنصر مورد نظر را در بالا و سمت راست fix می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-06 10:01
نه منظورم بزرگ و کوچک کردن پنجره مرورگر هست برای هدر این کد رو نوشتم و img که داخلش گذاشتم با تغییر سایز پنجره حرکت میکنه به سمت چپ و راست خواهشا راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-12-06 14:56
خصوصیت min-width رو امتحان کنید شاید کمک کنه، وگرنه لطف کنید کد HTML و CSS مربوطه را ارسال کنید تا بررسی بشه ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-06 18:59
این کد html و css که نوشتم و img جابه جا میشه مرسی از کمکتون ولی خیلی باید منتظر شم کاش راهی بود برای اینکه زودتر جواب بدیدheader{background: url('/images/pic/grape.jpg')top no-repeat #101010;height:500px;}
header img {width:600px;he ight:128px;marg in-top:180px;ma rgin-left:90px; }
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-12-07 08:43
خصوصیت زیر را به گزینشگر header اضافه کنید:
header{
...
min-width:600px
}
مقدار 600 به نیاز شما بستگی درد و می تواند بزرگتر باشد.
برای کسب اطلاعات بیشتر در مورد min-width به لینک زیر مراجعه نمایید:
www.beyamooz.com/cssref/227-css-properties/797
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-07 11:02
خدا رو شکر با همین min-width الان مشکلم حل شد مرسی واقعا خدا خیرتون بده ولی یک سوال! برای همه اجزا صفحه باید min-with تعریف کنیم تا جابجا نشن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-12-07 15:56
لطف کنید اگر، سوال و جواب ها ادامه دار هست، خیلی راحت روی لینک "پاسخ دادن" کلیک کنید.
اگر خصوصیت min-width را روی div اصلی که تمام اجزا صفحه در آن قرار دارد تنظیم کنید، کافی است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # mohsen moardi 1393-11-10 15:22
سلام مجدد.....تو اين قسمت نشون داديد ك چطور يك عنصر ب صورت fixed دربياد....زماني ك اين ويزگي اعمال بشه مثلا زماني ك صفحه رو پايين ميبري باز هم عنصر سر جاي خودشه و ديده ميشه...و اين طبيعيه...
اما در بعضي از سايتا ديده ميشه ك مثلا منو با پايين كشيدن صفحه بالا ميره و زماني ك ب قسمت بالايي صفحه رسيد ب حالت fixed در مياد....چطوري اين تنظيمات رو اعمال ميكنن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # nima_general 1394-02-29 18:59
میشه جواب این دوست عزیز ما رو بدید
مشکل ما هم همینه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-02-30 16:00
سلام، با استفاده از jQuery و پلاگین sticky براحتی می توانید، مکان منو را بعد از اسکرول، ثابت کنید.
برای کسب اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
www.websitecodetutorials.com/code/jquery-plugins/sticky-js-position-fixed-at-certain-point-in-page.php
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Pouriya 1395-02-20 10:33
سلام و عرض خسته نباشید . میخواستم بپرسم آموزش Sass و Less تو برنامتون هست ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-02-20 11:57
سلام ممنون. طی درخواست مکرر کاربران و همچنین درخواست شما، آموزش Less در برنامه ی کاری تیم بیاموز قرار گرفت. به زودی این آموزش ها تکمیل و ترجمه شده و در اختیار کاربران قرار خواهد گرفت.
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!