با استفاده از ویژگی position می توان مکان یک عنصر را در صفحه مشخص کرد.
از طریق این ویژگی می توانید تصمیم بگیرید که آیا مکان عنصر نسبت به flow صفحه مشخص شود (حالت پیشفرض) یا اینکه در عین حالی که جایگاهش در flow حفظ می شود مکانش تغییر کند و یا اینکه مکان آن را نسبت به یکی از عناصر اجدادش مشخص کنید. همینطور می توانید تغییر مکان را نسبت به viewport انجام دهید.
دو کلمه ای که در بالا به زبان انگلیسی نوشته شده اند جز کلمات پر کاربرد هستند که نیاز است به زبان انگلیسی آن ها را بشناسید اما تعریف آنها در ادامه آمده است.
flow
زمانی که عناصر بصورت عادی در زیر هم چیده می شوند اگر عنصر بالایی را حذف کنیم تمام عناصر به سمت بالا جابجا می شوند. و یا اگر عناصری در کنار هم چیده شده باشند اگر عنصری را از اول لیست حذف کنیم عناصر دیگر جابجا می شوند و مکان خالی را پر می کنند. یا اینکه اگر به عنصری margin بدهیم باعث می شود تا مکان عناصر اطراف آن تغییر کند. این نشان می دهد که عناصر در یک جریان (flow) یکسان قرار دارند و به نوعی به هم تکیه داده اند و به هم متصل هستند و در یک لایه زندگی می کنند.
زمانی که گفته می شود عنصری را از flow صفحه خارج می کنیم, منظور این است که اگر عنصر از این به بعد جابجا شود تکان خوردن آن تاثیری بر دیگر عناصر و مکان آنها نخواهد گذاشت.
viewport
قابی است که می توانید از طریق آن قسمتی از یک سند وب را در لحظه مشاهده کنید, از طریق اسکرول می توان Viewport را جابجا کرد تا بقیه محتوای صفحه قابل نمایش باشند.
در حالت پیشفرض تمام عناصر بصورت static در صفحه جای گرفته اند. این بدین معنی است که عنصر در جریان یا همان flow عادی صفحه قرار دارد. زمانی که گفته می شود برای عنصری position تعیین شده است منظور این است که مقدار ویژگی position آن از static به یکی از چهار مقدار sticky, fixed ,absolute ,relative تغییر کرده است.
دو مقدار دیگر هم اخیرا برای این ویژگی در CSS3 در نظر گرفته شده اند و آنها page و center می باشند. که البته این دو مقدار به همراه مقدار sticky از نظر پشتیبانی مرورگرها هنوز در شرایطی نیستند که مورد استفاده قرار بگیرند.
زمانی که از مقادیری به غیر از static برای یک عنصر استفاده شود, می توان مکان عنصر را با استفاده از ویژگی های right ,left, bottom و top تعیین کرد.
این تعیین مکان نسبت به یک سیستم مختصاتی خاص صورت می گیرد که آن سیستم مختصات با توجه به مقادیر مختلفی که ویژگی position می گیرد, متفاوت خواهد بود.
در ادامه مقادیر این ویژگی را بررسی شده اند:
relative
اگر این مقدار برای یک عنصر تعیین شود دو اتفاق می افتد:
1. عنصر یک سیستم مختصات برای آن دسته از فرزندانش که دارای position: absolute هستند, فراهم می کند.
2. یک سیستم مختصات هم برای خودش تعیین می کند.
این بدین معنی است که می توانید عنصر را با استفاده از ویژگی top و left و غیره جابجا کنید. نقطه مبدا مختصات همان مکان اولیه است که عنصر جای دارد.
از تصویر بالا دو نکته در مورد حالت relative دریافت می شود:
اول اینکه با اینکه عنصر جابجا شده است, جایگاهش در flow صفحه حفظ شده است و عناصر مجاور آن جایش را پر نکرده اند.
دوم اینکه زمانی که عنصری را با این حالت جابجا می کنیم این عنصر تاثیری بر دیگر عناصر نخواهد داشت و موجب تکان خوردن و جابجا شدن آنها نخواهد شد.
absolute
زمانی که از این حالت برای یک عنصر استفاده می شود, می توان عنصر را نسبت به عنصری از اجدادش جابجا و مکانش را تعیین کرد. همینطور دو اتفاقی که برای حالت relative می افتد برای این حالت نیز بوجود می آید, یعنی:
1. عنصر یک سیستم مختصات برای آن دسته از فرزندانش که دارای position: absolute هستند, فراهم می کند.
2. یک سیستم مختصات هم برای خودش تعیین می کند.
دو تفاوت بین absolute و relative وجود دارد:
اول اینکه زمانی که عنصر در حالت absolute باشد, جابجا شدن عنصر نسبت به اولین پدری از اجدادش که حالت relative دارد انجام می شود. و مختصات آن هم نقطه صفر top و left عنصر پدر می باشد. اما وقتی عنصر در حالت relative است جابجا شدن آن نسبت به حالت اولیه خود عنصر است و مستقل از عناصر پدرش می باشد.
( اینکه که می گوییم عنصر نسبت به اولین پدری از اجدادش که حالت relative دارد مختصات می پذیرد منظور این است که عنصر absolute به پدرش نگاه می کند اگر relative یا absolute یا fixed بود نسبت به آن مکان خود را مشخص می کند, اما اگر هیچ یک از این حالات را نداشت به عنصر پدر بزرگش رجوع می کند اگر آن هم نداشت همانطور به به سمت بالا حرکت می کند تا به یک عنصر با این حالت برسد اگر در نهایت هیچ عنصری یکی از این حالت ها را نداشت یعنی حتی html و body هم این حالات را نداشتند نسبت به صفحه مکان عنصر تعیین می شود. )
نا گفته نماند تا زمانی که برای عنصر مختصات بوسیله top و left و غیره تعیین نشود عنصر از flow خارج خواهد شد اما در همان مکان قبلیش باقی خواهند ماند.
دوم اینکه زمانی که از relative استفاده شود جایگاه قبلی عنصر در flow حفظ می شود اما همانطور که در دو تصویر زیر مشاهده می کنید وقتی که از absolute برای عنصر استفاده شود عنصر ار flow خارج می شود.
تصویر زیر حالت عادی یا همان حالت static عنصر را نشان می دهد:
اما این تصویر زمانی است که عنصر بوسیله مقدار absolute تعیین مکان شده است:
در تصویر بالا عنصر صورتی رنگ نسبت به عنصری که حاشیه خاکستری دارد تعیین مکان شده است و کد بصورت زیر می باشد:
.container {
position: relative;
}
.element {
position: absolute;
top: 30px;
right: 40px;
}
fixed
این حالت کاملا مشابه به حالت absolute می باشد یعنی عنصر در flow خارج می شود اما تفاوت این حالت در این است که عنصر بجای آنکه نسبت به یک عنصر از اجدادش تعیین مکان شود, نسبت به viewport مکانش مشخص می شود. و نکته دیگر اینکه در آن مکان در هر حالتی ثابت می ماند و حتی اسکرول کردن صفحه روی آن تاثیری نخواهد گذاشت.
یکی از پرکاربردترین موارد برای استفاده از حالت fixed برای ثابت کردن هدر یا منوی اصلی سایت در بالای صفحه می باشد. یا گاهی تبلیغات را در کنار صفحه بوسیله این حالت بطور زجرآوری برای کاربر ثابت می کنند :)
در دموی زیر اسکرول کنید تا تاثیر این حالت را بر روی منو مشاهده کنید:
See the Pen position: fixed; by Mojtaba Seyedi (@seyedi) on CodePen.
sticky
این حالت مخلوطی از حالت relative و fixed می باشد. عنصر شبیه به حالت relative رفتار می کند تا وقتی که به یک نقطه از اسکرول برسد. سپس بلافاصله رفتارش به حالت fixed تبدیل می شود. کد زیر را در نظر بگیرید:
.element {
position: sticky;
top: 20px;
}
در اینجا عنصر در هر کجا که باشد تا زمانی که اسکرول باعث نشود تا فاصله آن از بالای صفحه بع 20 پیکسل برسد رفتار relative خواهد داشت اما به محض اینکه فاصله آن در زمان اسکرول به 20 پیکسلی بالای صفحه برسد در همان فاصله از بالای صفحه ثابت خواهد ماند. در دموی زیر این رفتار توسط جاوااسکریپت طراحی شده است اما به محض اینکه پشتیبانی این رفتار در مرورگرها به حالت امنی برسد می توانید به راحتی از CSS برای پیاده سازی این حالت استفاده کنید:
See the Pen KzoOqG by Mojtaba Seyedi (@seyedi) on CodePen.
center
همانطور که از نام این حالت پیدا است باعث می شود تا عنصر در وسط عنصر نگهدارنده اش جای بگیرد و همچنین توسط ویژگی های top و left و غیره به هر یک از چهار جهت نیز می تواند انتقال داده شود.
این حالت مثل حالت absolute عنصر را از flow خارج می کند و این عنصر دیگر تاثیری بر عناصر دیگر نخواهد داشت.
page
هنوز رفتار دقیق این حالت کاملا مشخص نیست! ( ولی باید چیز خوبی از کار در بیاد :) )
نکات مهم
زمانی که عنصری در حالت absolute باشد, عرض آن به مقدار محتوای داخل آن خواهد بود (دقیقا مثل زمانی که از display: table برای یک عنصر استفاده می کنیم, یعنی عرض عنصر حداقل می شود). برای اینکه عنصر را مجبور شود تا تمام عرض نگهدارنده اش را پر کند دو راه وجود دارد. یک اینکه می توانید با استفاده از ویژگی wdith عرض برای عنصر تعیین کنید. مثلا %100. دوم اینکه به صورت زیر عمل کنید:
.element {
position: absolute;
left: 0;
right: 0;
}
همینطور اگر می خواهید عنصری که حالت absolute دارد از لحاظ عمودی کاملا کشیده شود نیز می توانید بصورت زیر عمل کنید:
.element {
position: absolute;
top: 0;
bottom: 0;
}
اگر برای عنصری در این حالت height مشخص شود و همینطور top و bottom تعیین گردد: top تعیین کننده مکان عنصر خواهد بود و برنده مسابقه خواهد شد.
اگر width برای عنصر تعیین شود و همینطور دو مقدار left و right را داشته باشیم, اگر جهت صفحه چپ به راست باشد left تعیین کننده مکان عنصر خواهد بود و اگر جهت صفحه راست به چپ (rtl) باشد, right برنده خواهد بود.
نکته دیگر اینکه عناصر در حالت fixed همیشه ثابت نسبت به viewport هستند مگر اینکه یکی از عناصر پدرشان وارد بازی transform شود. در این صورت عنصر fixed نسبت به آن عنصر پدر جای می گیرد و با اسکرول نیز حرکت می کند.
دموی زیر را با دقت بررسی کنید تا با حالت های مختلف ویژگی position بهتر آشنا شوید:
See the Pen position by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
ویژگی position در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود. اما وقتی مقدار fixed را دارد در برخی مرورگرها باید مراقب بود:
همینطور پشتیبانی حالت sticky در جدول زیر تعیین شده است:
و حالت های page و center فعلا در هیچ مرورگری پشتیبانی نمی شوند.
با سلام و عرض تشکر
مطالب بسیار پرکاربرد و کارآمد هستند.
سلام. خوشحالم ک کمکتون میکنه
موفق باشید
خدا خودت و پدر و مادرت و جدت و کلا دودمانت رو بیامرزه.
دمت گرم.
خیلی مفید بود. بیش از حد تصور.
من اصلا دنبال مطلب فارسی تو نت نمی گردم. منتهی دنبال مفهوم absolute بودم و خودم هم توی پروژه ام به تناقض رسیده بودم با اون چیزی که متوجه شده بودم نمیفهمیدم چرا عملکرد چندگانه داره تو شرایط مختلف . تجربی یه چیزایی دستم اومده بود اما اعصابم از اینکه این مفهوم رو نفهمیدم خورد شده بود تا اینکه این مطلب بسیار جامع و کامل و مفید شما را مطالعه کردم.
خیلی خوبه که آدم علمی و اصولی جلو بره نه تجربی.
بازم متشکرم. خدا عوض خیر به شما بدهد و عمر با برکت و عزت داشته باشید.
یا علی مدد
ممنون. خوشحالم که مفید بوده.
البته همین که شما تجربه کردید این مطلب بهتون چسبیده :)
پس تجربه و علم با هم :)
موفق باشید
سلام
به خاطر آموزش خوبتون بهتون خدا قوت میگم…
من یه مشکل اساسی با relative و absolute دارم.اگه بخوام سایتی طراحی کنم و از این position ها استفاده کنم آیا میتونم فقط از یکی از اونا استفاده کنم؟منظورم اینه که مثلاً اگه بخوام یک باکس رو به قسمتی از صفحه ببرم میتونم فقط از حالت relative استفاده کنم؟آخه همون کاری رو که absolute انجام میده با relative هم میشه انجامش داد پس چه نیازی هست که اصلاً دوتاش رو یاد بگیریم؟
سلام ممنونم از پیامتون.
نه این دو با هم فرق دارند.
من تاجایی که تونستم اینجا نوشتم حالا مطالب دیگه رو هم توی سایت های دیگه بخونید اگر باز هم مشکل داشتید توی کارگاه صفحه آرایی شرکت کنید کاملا مطلب روشن میشه.
موفق باشید.
اقا دمت گرم من 16 سالمه و از مطالب سایتت خیلی چیزا یاد گرفتم.
ممنونم ازت
سپاس
فوق العاده بود! بالاخره اون کاری که میخواستم و تونستم انجام بدم، مرسی از سایت عالیتون :)
سلام
دوتا سوال داشتم.
1.با توجه به این متن: “زمانی که گفته می شود عنصری را از flow صفحه خارج می کنیم, منظور این است که اگر عنصر از این به بعد جابجا شود تکان خوردن آن تاثیری بر دیگر عناصر و مکان آنها نخواهد گذاشت.”
میشه فهمید که وقتی عنصری رو جابجا کنیم و عناصر مجاور اون جای اون رو تو صفحه پر نکنن و اینکه عنصر جابجا شده بتونه روی عناصر مجاورش قرار بگیره ، میگیم که این عنصر از flow صفحه خارج شده.
ولی تو قسمت آموزش relative و absolute دقیقا عکسش رو گفتید. تو قسمت relative عنصردر تصویر جابجا شده ولی تاثیری رو عناصر اطرافش نگذاشته که این نشون میده از flow خارج شده. در حالیکه گفتید جایگاهش در flow حفظ شده.
دقیقا عکس این حالت رو هم برای absolute گفتید. که به نظر من اشتباه صورت گرفته.
2.در مورد مقایسه ای که بین ویژگی های top left…و width & height انجام دادید ، در واقع این ها باهم ارتباطی ندارن
چون ویژگی های اول برای تعیین مکان هستن ولی ویژگی های دوم برای مشخص کردن عرض و ارتفاع عنصر. اینکه فرمودید اگر top و height برای عنصر مشخص بشن ، این وسط top پیروز میشه ممنون میشم یه کوچولو راجبش توضیح بدید.
سلام.
در مورد قسمت اول با دقت بیشتری بخونید متوجه میشید. جایگاهش در flow حفظ شده یعنی جایگاه قبلی که داشت، قبل از اینکه position بگیره، یعنی کسی جاشو پر نکرده. جایگاهش توی flow حفظ شده ولی خودش دیگه توی flow نیست.
2. نکته اینجاست که شما باید بدونید که میشه با top و bottom و …. به عنصر اندازه داد.
کارگاه صفحه آرایی همین بحث ها رو کاملا براتون مشخص میکنه می تونید استفاده کنید.
موفق باشید.
سلام
من فکر میکنم منظورشون اینه مثلا اگر شما بیای و تاپ رو بدی 100 پیکس
و باتم رو بدی 200پیکس
در اصل مقدار height 100 px هستش
حالا هی بیا و خاصیت height : 300px بده بهش
اجراش نمیکنه چون پایین و بالا اولویت دارن نسبت به ارتفاع و چپ و راست اولویت دارن نسبت به عرض
سلام
خیلی مفید بود دمت گرم
آقا واقعا ممنون
بسیار سپاسگزارم . من به انگلیسی میخوندم این مطلب رو و متوجه نمی شدم .شما خیلی واضح توضیح داد. به من خیلی کمک کرد.
دمتون گرم آموزشا عالی و کامل هستن. ممنون
فوق العاده عالی
من همیشه دنبال منابع خارجی بودم ولی وقتی سایت شما رو دیدم عاشقش شدم کمتر سراغ خارجیا میرم(بجز پروژه های codepen)
خیلی با css مشکل داشتم ولی با توضیحات کامل و مثال های متنوع شما مشکلم حل شد
با قدرت ادامه بدید – آرزوی موفقیت
مرسی بابت این مطالب ارزشمند.
سلام
تو قسمتی درباره sticky نوشتید که این عنصر شبیه به حالت relative رفتار می کند تا وقتی که به یک نقطه خاصی از اسکرول برسد
به نظر من شبیه relative رفتار نمی کنه چون در حالت relative ما می تونیم به صورت عمودی هم عنصر را جابجا کنیم ومثلا اون را کمی بالا تر از حالت عادیش ببریم ولی تو این حالت نمی تونیم
سلام مطلب فوق العاده بود .
فقط ی سوال خارج از محدوده ….برای کاربا فرم ها حتما باید php بلد بود ؟
منظورم اینه که کار با فرمها به php مربوط میشه؟
با تشکر.
سلام، بستگی به مورد استفادتون داره کاملا. ولی آره معمولا به زبان های سمت سرور مربوط میشه، حالا یا php یا .net و غیره.
درود بر شما
ممنون از وقتی که گذاشتید برای این مطلب خیلی کاربردی مفید و مورد نیاز من بود
دم شما گرم
خوب بود
سایتتون عالیههههههههههههههههههههههههههههههههههههههههه
واقعا عالی بود.
حرفه ای، علمی و در عین حال ساده توضیح دادید.
ممنون بابت آموزش.
ممنون از مطلب خوبتون
بهتر از این مقاله برای توضیح position پیدا نکرده بودم!
سلام
ممنونم از مطلب خوبتون.
ولی من هنوز ارتباط بین relative و absolute رو درک نکردم و هنوز گیجم!
مثلا این کد رو میشه برام تفسیر کنید که چرا relative در کلاس container اومده یا چرا absolute برای image تعریف شده؟؟؟!
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_top_left
کلا رابطه این 2 تا رو درک نکردم هنوز!
ممنون میشم توضیح بدید.
سلام،
absolute برای image تعریف نشده، برای اون نوشته تعریف شده، چون می خواستن اون نوشته نسبت به container در گوشه بالا قرار بگیره.
وقتی میگیم نسبت به یک چیزی یعنی اون چیز باید relative بگیره. و اون عنصری که باید نسبت به اون چیز مختصات بگیره باید absolute داشته باشه.
سلام
میشه در یک مورد بنده رو راهنمایی کنید:
یک منوی کشویی تصور کنید که در حالت موبایل وقتی روی یک آیتم بزنیم زیر منو باز میشه ، حالا من می خوام با زدن مجدد روی همون منو زیر منو بسته بشه. این کار رو هم فقط با css صرف می خوام انجام بدم، آیا امکانش هست؟و اگر هست چطور؟
یک نکته بگم که وقتی برم روی آیتم بعدی، زیر منوی های آیتم قبلی بسته میشن، اما من میخوام اینکار رو با کلیک روی هر آیتم هم انجام بدم.
درود ، اگر بخوام استایل پوزیشن رو روو حالت فیکس پایین سمت چپ سایت تعریف کنیم :”style=”position:fixed;left:0px;top:0px بجای top چه چیزی باید بنویسم؟
درود، bottom
سلام و خدا قوت آقای مهندس سیدی
خیلی خوب بود و روان توضیح دادید.
سپاس
سلام، ممنون آقا میلاد عزیز
سلام و خسته نباشید
توضیحات کامل و بسیار کاربردی بود بی نهایت سپاسگزارم.
سلام و خسته نباشید واقعا مطالب سایتتون عالیه عالی
عالی
سلام
خسته نباشد بسیار ساده و مفید بود .
سلام با تشکر از وبسایت خوبتون خواستم بگم اگه ممکنه اموزشی در رابطه با ترکیب دو مبحث position و float قرار بدید چونکه مطالبشون به هم بسیار شبیهه و درکش یخورده سخته.ممنون.
سلام، بیان این مباحث از طریق نوشتاری صحیح نیست، معمولا باید تصویری توضیح داده بشه، دوره صفحه آرایی واکنشگرا دو قسمت مجزا برای این دو مبحث داره.
ممنون ):
بازم تشکر
سلام.
از توضیحات جامع و کامل و بینقصتون خیلی خیلی ممنون.
سلام …احیانا شما از اعضای کنسرسیوم جهانی وب نیستید؟اگه هستید سلاممو به تیم برنرزلی برسونید….
خدا وکیلی از این همه جزییات کپ کردم!!!!
سلام، باشه بزرگواریتون رو می رسونم :))
منم خودم اینا رو از وب و از افراد دیگه یاد گرفتم، و در مورد جزییات هم باید بگم تنها کاری که کردم در زمان نوشتن، مقالات زیادی رو کنار هم گذاشتم تا چیزی از قلم نیافته.
سلام و تشکر . مطلب فوق العاده عالی و قابل هضمی بود البته به تحریر شما قابل هضم شد :) بازم تشکر ازتون که به علاقه مندان در درک بیشتر مفاهیم وب کمک میکنید و اینکه وقت ارزشمندتنون رو صرف نوشتن همچین مقاله های بینظری میکنید .
مرسی از این توضیحات واقعا هیچجا اینجوری توضیح نداده بودن
دیگه فکر نکنم هیچوقت با position مشکلی داشته باشم
مرسی از سایت خوبتون خسته هم نباشین 🙏
سلام مطلبتون عالی بوووود
خسته نباشد
با سلام
ممنون از مطالبی که واقعا پر مغز بود.
سوال اول: معانی خود کلماتی که برای حالت های position در نظر گرفته شده اصلا با کاری انجام می ده نمی خونه یا اینکه معانی دور آن مد نظر است یا…
absolute به معنی مطلق
relative به معنی وابسته
در صورتی که absolute به relative است چرا؟؟؟
سوال دوم : در آخرین تمرین که همه مثال ها را در یک مثال جهت مقایسه تعریف کردید چرا مسطیل پایینی با دادن top یا left کلا از صفحه محو می شود؟
ببخشید
در صورتی که absolute به relative وابسته است چرا؟؟؟
سلام،
در مورد نام relative: منظور اینه که عنصر نسبت (وابسته) به موقعیت “خودش” مختصات میگیره.
absolute رو من خودم هم درک نمیکنم چرا این رو گذاشتن، شاید یک وجه نامگذاری این بوده که از جریان نرمال صفحه خارج میشه و بصورت مطلق موقعیتش مشخص میشه.
سلام قبلا هیچی در باره این موضوع نمیفهمیدم حال یک کم بفهمیدم اگر بشه در قالب ویدیو اینها ره تو ضیح بدی خیلی خوب میشه ممنون
اخه مگه داریم اینقد خوب ؟
salam
bebakhshid che joori mishe 2 ta tage masalan div be surate tu dar tu dasht va tage dakheli ro ba vizhegiye position az dele tage valed biruin avord ke be valedesh bechasbe ghablan didam ke in karo mikonan vali yadam nist
سلام، همین مطلب رو کامل بخونید متوجه میشید، احتمالا باید به والد relative بدید و به فرزند absolute بعد بر اساس نیاز top , left رو تنظیم کنید.
salam
baratun yek kod email mikonam va soalam ro behtar matrah mikonam unja. mamnun az shoam
سلام
من یه div درست کردم و تو سی اس اس بهش position:relative دادم بعدش چند تا div دیگه درست کردم به همه شون با compound سلکتور ها position:absolute دادم تا از والدش پیروی کنه اما وقتی این absolute دادم باعث شد این div ها برن تو هم دیگه(از block level به text level تبدیل شدند ) چی کار کنم تا خصوصیت block رو از دست ندن؟
display:block هم برای اون div هایی که خصوصیت block از دست دادن رو گذاشتم ولی بازم نشد
خدا خیرتون بده!
چند مدته که تازه شروع به یادگیری طراحی وب کردم ولی این مبحث برام همیشه گیج کننده بوده و تازه همین الان که مطالب رو خوندم برام قابل فهم شد. کاش خیلی زودتر از اینا با سایت شما آشنا می شدم.
عالی بود، مرسی
سلام بزرگوار.
عزیز جان اینو هر کاری میکنم درک نمیکنم:
“اگر برای عنصری در این حالت height مشخص شود و همینطور top و bottom تعیین گردد: top تعیین کننده مکان عنصر خواهد بود و برنده مسابقه خواهد شد.
اگر width برای عنصر تعیین شود و همینطور دو مقدار left و right را داشته باشیم, اگر جهت صفحه چپ به راست باشد left تعیین کننده مکان عنصر خواهد بود و اگر جهت صفحه راست به چپ (rtl) باشد, right برنده خواهد بود.”
میشه یه تیکه کد بیشتر بهم معرفی کنید. یا کمی بیشتر توضیح بدید.
ممنونم.
سلام،
ببینید فرض کنید من یک عنصری دارم که از نوع absolute هستش، اگر بهش top صفر بدم میچسبه به بالا، اگر بهش bottom صفر بدم میچسبه به پایین.
حالا اگر دو تاش رو بدم چکار میشه؟ عنصر جر نمیخوره که نصفش بچسبه به بالا نصفش بچسبه به پایین، عنصر ما ژیمناستیک کاره، کشیده میشه یک سرش میچسبه به بالا و یک سرش میچسبه به پایین.
خب این اتفاق می افته چون من به عنصرم نگفتم چه ارتفاعی رو داشته باش برای همون top و bottom هرجور دوست دارن با عنصر ژیمناستیک کار ما برخورد میکنند. منم بودم خب همین کار رو میکردم.
حالا فرض کن من بگم ای عنصر عزیز اصلا به کسی محل نده، هرچی شد تو از 100 پیکسل بیشتر کش نیا. ارتفاعت باشه 100 پیکسل.
بعد عنصر قصه ما با تعجب به ما نیگاه میکنه میگه خب این top و bottom هر دوشون دارن به من نخ میدن، یکی میگه با بچسب به من، اون یکی میگه اون رو ولش کن بیا پایین.
توی این حالت اون کسایی که استاندارهای وب رو مینویسند دست به کار میشن و به عنصر ما میگن، top از آشناهاست برای همون همیشه اولویت با اونه.
نمونه کد قصه ما:
https://jsbin.com/delosur/edit?html,css,output
سلام مرسی بابت مطالب خوبتون
چرا توی حالت absolute عرض و ارتفاع عنصر(div) ما ثابت میشه(متناسب با محتوای داخلش) اما توی حالت relative اینطور نیست.
آیا بخاطر اینه که توی حالت relative عنصر ما از flow اجدادش پیروی میکنه؟
سلام، ارتفاع که همیشه در حالت عادی وابسته به محتوا است در هر نوع position. فقط می مونه عرض، که اون هم برای عناصر بلاک همیشه تمام عرض پدرش رو میگیره، و دقیقا به دلیلی که گفتید در زمان absolute از این قانون پیروی نمیکنه.
سلام استاد
چرا دو تا عنصر absolute میرند تو هم ؟ مثلا 2 تا div داریم هر دوتاشون هم absolute هستند. بعد این دوتا تو هم میرند.
چطوری می شه کنار هم قرار شون بدم ؟
سوال بعد این که توی این حالت چطور میشه عنصر اولی رو اول نمایش داد چون فقط دومی دیده میشه
#d1 {
background-color: yellow;
position: absolute;
width: 100%;
}
#d2 {
background-color: orange;
position: absolute;
width: 100%;
}
سلام، نکته اینجاست که کار absolute همین هستش، برای اینکه عنصر از فلو اصلی صفحه خارج بشه که این امکان رو میده بیان رو هم
کافی position رو ازشون بگیرید یا مختصاتشون رو تغییر بدید
سلام و وقت بخیر
من با وردپرس دارم کار میکنم
یک برگه بافیوژن المان ها طراحی کردم…وقتی زوم میکنم یکی از div هام میره زیر div قبلی …لطفا راهنمایی کنید
سلام من یه دایو تعریف کردم و ارتفاعش رو بصورتmin-height:500px قرار دادم و یه دایو کوچیک هم داخلش با پوزیشن ریلیتیو تعریف کردم و ارتفاعش رو 150px گذاشتم و حالا یه مختصاتم دادم بهش داخل همون دایو بزرگتر پدر ، سوالم اینه که چرا 150px که ارتفاع دایو کوچیک بود به دایو بزرگتر هم اضافه شدو ارتفاع دایو بزرگتر شد 650px ،،، تنها راهی که به ذهنم رسید این بود که min-height رو به height تبدیل کردم و درست شد ، میخوام بدونم راه دیگه ای هس که دایو پدر همون min-height بمونه و ارتفاع 150px هم بهش اضافه نشه؟ مرسی بابت آموزشای خوبتون
سلام، همونطور که توی پست نوشتیم، اگر پوزیشن از نوع relative باشه عنصر توی حالت عادی خواهد بود و ابعادش روی ابعاد پدرش تاثیر میزاره. بسته به موردتون داره ولی راه حل شاید استفاده از absolute باشه.
تاکیید میکنم شرایط مهم هستش و من نمیدونم مورد شما چیه.
سلام من یک سوال دارم چطوری عنصر ثابت باشه ولی بعد از اسکرول و جای مشخصی از صفحه نمایش داده بشه ؟
ممنون جواب بدید با تشکر
سلام، سوالتون برای خیلی مفهوم نبود، ولی در کل مواردی که با رفتار اسکرول در ارتباط هستش، شما برای انجام دادنش نیاز به جاوااسکریپت دارید.
سلام وقتتون بخیرو خسته نباشید
من توی طراحیم منویی طراحی کردم که میخوام به حالت sticky باشه top را برابر صفر میدم . اسکرول میکنم پایین فیکس میشه ولی به آخرای صفحه که می رسم منو از حالت فیکس خارج میشه بعدش که برمیگردم بالا (وسطهای صفحه) منو دوباره میاد و فیکس میشه بالا. در صورتیکه من جاوا اسکریپتی واسه این ننوشتم. کل css , html را حالت کامنت درآوردم به جاش br زدم ببینم مشکل از کجاست ولی پیدا نکردم اگه مقدوره راهنماییم کنید. کد هم عین کد شما را نوشتم:
#navbar{
position:sticky;
top: 0;
}
میخوام تا آخر صفحه که اسکرول میکنم بچسبه بالا
سلام. عالی بود! ولی اینکه توی همین وب سایت خودتون منو جهت اسکرول رو تشخیص می ده رو چطوری انجام دادید؟ من وقتی به پایین اسکرول می کنم مخفی میشه ولی وقتی به بالا اسکرول می کنم شبیه sticky میشه.
سلام
اگر متوجه شدید منم راهنمایی کنید ممنون
اینطور کارها نیاز به جاوااسکریپت داره
من معمولا کمتر توی سایتها نظر میدم. ولی واقعا سایتتون عالیه و مطالب به زبان ساده توضیح داده شده است. ممنون
مطلب کامل و بسیار مفید بود ممنون
عالی ترینید
سلام تشکر فراوان بابت بهترین سایت آموزش css به فارسی. دمتون گرم خیلی عالیه.
عالی بود.
سلام! آموزش عالی و جامع بود ولی نمی دونم چرا توی وب من نمیشه انجام داد. من اسکریپت و کدهای زیر رو توی چند وبلاگ آزمایش کردم مشکلی نداشت اما وقتی توی وب اصلیم نشون داده نمیشه.
در واقع من یه منوی شناور میخوام که ویژگی پوزیشن با مقدار فیکست داشته باشه اما توی صفحه مورد نظرم شناور و ثابت نیست بلکه با اسکرول صفحه جابجا میشه. ممنون میشم راهنمایی ام بفرمائید!
صفحه مورد نظرم: http://taleshblog.ir/xp/categories
کدهای اعمال شده:
div.floating-menu {
position:fixed !important;
right:10px;
top:100px;
width:150px;
z-index:100;
}
div.floating-menu a, div.floating-menu h3 {
display:block;
margin:0 0.5em;
}
پیوندهای پیشنهادی بسته‌های خبری مطالب پربازدید باشگاه نویسندگان
پاسخ: https://discuss.css-tricks.ir/?p=652
عناصری که خارج از flow صفحه قرار میگیرن:
1- عناصری که float میشن
2- عناصر position:absolute یا position:fixed
اگر عنصر position:relative باشه، از flow صفحه خارج نمیشه و ترتیب عناصر رو بهم نمیریزه:
=> وقتی جابجا بشه، جایگاه قبلیش در flow صفحه حفظ میشه و عناصر مجاور، جای اون رو پر نمیکنن.
=> اما وقتی این عنصر جابجا بشه تاثیری بر دیگر عناصر نخواهد داشت و تکون خوردنش باعث جابجا شدن عناصر مجاورش نمیشه.
=> اما اگر margin داشته باشه، روی مکان عناصر مجاور تاثیر میذاره.
*** در واقع وقتی میگیم یک عنصر از flow صفحه خارج شده، یعنی “باقی عناصر از حضور اون عنصر در صفحه آگاه نیستن”.
و به همین دلیل میگیم position:relative هنوز داخل flow هست چون وقتی موقعیتش عوض بشه، جایگاه قبلی ش حفظ میشه و ترتیب flow رو بهم نمیریزه، چرا؟ “چون باقی عناصر فکر میکنن اون عنصر هنوز در اون جای قبلیش حضور داره”
=> همچنین اگر عنصرِ float شده، margin داشته باشه، روی عناصر مجاورش تاثیر میذاره و مکان اونها رو تغییر میده.
یک نکته:
عنصری که position:absolute هست، موقعیتش نسبت به اولین عنصر در اجدادش که position گرفته تعیین میشه. این position میتونه هرچی باشه، فقط باید غیر از static باشه، لزومی نداره حتما relative باشه تا نسبت به اون تعیین بشه.
-البته در متن هم این اشاره شده بود، منتها چون در ابتدای توضیح گفته شده اون عنصر پدری که relative باشه، ممکنه دوستان دچار اشتباه بشن.
عرض ادب خدمت شما
مطالب سایت بشدت عالی و مفهومه. خیلی ممنون از زحماتی که میکشین امیدوارم همیشه موفق باشین و همینطور ادامه بدین
بسیار عالی فقط این مقدار
margin: u;
تو اولین دمو چیکار می کنه؟
واقعا الان پوزیشن ها را متوجه شدم. امیدوارم همیشه پاینده باشید
فک کنم از بین تمام کسایی که تولید محتوی در این زمینه میکنند، فقط شما مفهوم رو متوجه بودید. چون فقط شما به سادگی توضیح دادید و من متوجه شدم. واقعا یه دنیا ممنون بابت این توضیح عالی و دانش بالا