مفهومCSS Positioning

caspianhero

caspianhero

Member
با سلام بر دوستان عزیز
یک سوال فنی داشتم : کسی میتونه مفهوم position در css را کامل برام توضیح بدهد!
کلا 4 مقدار داره:
1. static
2. absolute
3.relative
4. fixed
مشکل من با شماره 2و3 هست: مثلا باید چه موقع از این موقعیت ها در کد ها استفاده کرد؟؟ کار شان دقیقا چطوری هست!!

سپاس

 
meraj-persian

meraj-persian

Active Member
سلام.
اول در مورد absolute توضیح میدم بعد در مورد relative:

با استفاده از این position ما میتونیم لایه رو در صفحه آزاد بزاریم تا هرجایی که میخوانن برن و با استفاده از خصوصیت های "left:فاصله از چپ" و" top:فاصله از بالا" میتونیم کنترلش کنیم.

position دومی هم مثل اینه ولی تا حدی کنترل داره جوری که فاصله ها از لایه ای که توش هست تایین میشه نه از صفحه.
اگر لایه تو لایه دیگه ای نباشه هیچ فرقی با هم ندارند.

در ضمن خصوصیت position خیلی بحث داره و شما باید تو سایت های آموزشی دیگه دنبال آموزش بگردید مثلا:
www.w3schools.com
 
آخرین ویرایش:
dexted

dexted

Active Member
صحبت دوستمون کامل بود فقط برای کامل تر شدن موضوع بگم که بهتره وقتی میخاید از absolute استفاده کنید حتما اونو در یک عنصری بذارید که relative هست . و نکته دیگه در مورد relative این که : این خاصیت به نوعی هم از خواص absolute داره هم از خواص استاتیک یعنی از طرفی میشه بهش top و ... داد و از طرفی نسبت به مکان قرار گیری عناصر اطرافش حساسیت داره

و در نهایت لینک دقیق سایت مفیدی که دوستمون دادن(که البته آدرسش یه s کم داره :wink:) : http://w3schools.com/css/css_positioning.asp
این سایت مثال های بسیار خوبی داره .
:rose:
 
caspianhero

caspianhero

Member
با استفاده از این position ما میتونیم لایه رو در صفحه آزاد بزاریم تا هرجایی که میخوانن برن
کلیک کنید تا باز شود...
position دومی هم مثل اینه ولی تا حدی کنترل داره جوری که فاصله ها از لایه ای که توش هست تایین میشه نه از صفحه
کلیک کنید تا باز شود...
منظور شما از لایه چیست؟؟؟ div هست؟؟؟ ایا رزولوشن مانیتور ها روی این خاصیت تاثیر می گذارند؟؟
راستی می تونید یک مثال برنید و توضیح بدهید؟؟w3 هم قبلا دیدم!!

سپاس
 
آخرین ویرایش:
meraj-persian

meraj-persian

Active Member
لایه همون div هستش.
رزولیشن هم مهم نیست و فرق خاصی نداره.
این هم مثال absolute:
[HTMLS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>


<body>
<center>
<div style="background-color:coral;width:450px;height:750px;">
<div style="position:absolute;width:200px;height:196px; background-color:#FF0000; left: 202px; top: 300px;"></div>
</div>
</center>
</body>


</html>


[/HTMLS]
و این هم مثال relative:
[HTMLS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>


<body>
<center>
<div style="background-color:coral;width:450px;height:750px;">
<div style="position:relative;width:200px;height:196px; background-color:#FF0000; left: 202px; top: 300px;"></div>
</div>
</center>
</body>


</html>


[/HTMLS]
 
meraj-persian

meraj-persian

Active Member
اون مثال فرق بین اون دوتا position رو نشون میده.
میبینی که در مثال اولی فاصله های div مربوطه از صفحه مشخص شدهه ولی در دومی از div مادرش(لایه ای که لایه ما در اون هست) مشخص شده.
 
caspianhero

caspianhero

Member
متشکر دوست عزیز: ولی من جواب یک سئوالم را نگرفتم!! چه موقع در طراحی تملپیت باید از این خاصیت استفاده بشه؟؟ مثلا بیشتر این موقعیت را به چه المنتی می دهند؟؟ مثلا wrapper یا header یا container یا sidebar و.......
سپاس
 
meraj-persian

meraj-persian

Active Member
کلا استفاده از این خاصیت کم هستش و بیشترین استفاده خاصیت Position برایfixed هست.
من هم خیلی کم از این خاصیت استفاده میکنم.
استفادش هم برای وقتی هست که شما نمیتونید محل div رو درست تنظیم کنید.
و محدودیتی هم برای استفاده نداره.
من فقط بعضی وقت ها برای sidebar از این خاصیت استفاده میکنم.
 
caspianhero

caspianhero

Member
متشکر دوست عزیز:یک سئوال : فکر کنید یک div به نام هدر دارید و میخواهید درون ان دایو یک div دیگر برای لوگو (در سمت چپ هدر)بگذارید؟؟ خب : حالا جهتش را چطور باید مشخص کرد؟؟
سپاس
 
meraj-persian

meraj-persian

Active Member
باید به اون لایه ای که میخواین توی لایه دیگه بزارین خصوصیت margin-left با عدد 0px بدی.
یا اینکه margin-right با عدد 100% به لایه بدی.
اگه هم خاصتی بزاریش طرف راست به جای right باید left و به جای left باید right رو بزاری.
برای وسط هم لایه رو لایه تگ center بزار.
 
itboys

itboys

New Member
سلام .. برای این کار بهترین راه حل استفاده از float هست .. به این صورت !! float;right; و یا سمت چپ !.
 
dexted

dexted

Active Member
سلام به دوستان:)

من قصد دخالت ندارم... ولی فکر نمیکنم استفاده از تگ center دیگه کار درستی باشه
این تگ از HTML5 خارج شده ... باید قبول کرد یه کمی پیره دیگه نیاز به استراحت داره :green:

اما دوست من شما باید ببینید که از هر کدوم از این راه ها که برید چه اتفاقاتی ممکنه بعدا رخ بده که سایت رو به هم بریزه. مثلا یه جا ممکنه استفاده از margin باعث شه اگر عنصری کنارش اومد اون عنصر بپره پایین. یه جایی شاید float خوب باشه یه جای هم استفاده از absolute و البته relative . اینها فقط با تجربه به دست میاد (بر عکس اینکه خیلی ها فکر میکنن قسمت کد نویسی کلاینت ساید راحت ترین بخش طراحی سایت هست) یعنی شما باید هر روش رو امتحان کنید بعد کنارش عنصر اضافه کنید یا صفحه رو کوچیک و بزرگ کنید یا کارهایی مثل این.
استفاده از absolute و relative خیلی جاها به شما آزادی میده اما بعضی جاها واقعا گریه در میاره ... مثلا وقتی بخواهید سایت رو responsive کنید .
برای کنار هم چیدن چند تا عنصر یا قرار گیریشون در یه جای خاص من چند روش رو اینجا جمع آوری می کنم برای شما و پیشنهاد میکنم تا چند وقت همرو امتحان کنید.
1- استفاده از float
2- استفاده از margin و padding
3- استفاده از display - مثل block, inline-block یا ...
4- استفاده از positioning - مثل absolute و relative
(البته دلیلی نداره که نشه اینارو باهم استفاده کرد یعنی بعضی جاها لازمه مثلا 1 و 2 با هم استفاده بشن)

به هر حال باید چندین طرح رو کار کنید تا قضیه بیاد دستتون(یک پیشنهاد : استفاده از نرم افزارهایی مثل dream weaver یا .. اگر تجربه خیلی زیادی ندارید از نظر من فقط ضربه زدن به خودتون هست - بهترین و بهترین ابزار فقط notepad++ و firebug هست همین...)

:rose:
 
meraj-persian

meraj-persian

Active Member
درسته که تگ center از رده خارج شده ولی تو تمام مرورگر ها جواب میده.

در ضمن این تگ از اول تو html5 نبود که بخواد خارج بشه.

در مورد نرم افزار هم به نظرم notepad++ اصلا پیشنهاد خوبی نیست و نرم افزار Dreamweaver یا نرم افزار Microsoft Expression Web هم برای مبتدی ها خوب جواب میده.

اگر هم با این نرم افزار مشکل داشتید برید برنامه html pad 2011 رو دانلود کنید.

(من پیشنهاد میکنم یه سر به سی دی فروشی بزنید و ویدیوی آموزش html و Css رو بخرید)

من لینک زیر رو برای خرید آموزش جامع طراحی وب گذاشتم که قبلا خودم خریدم و کاملا ازش راضی بودم:
اگه خواستید هم این آموزش رو از سی دی فروشی بخرید


خرید آموزش طراحی وب
 
dexted

dexted

Active Member
بله خیلی تگ ها هستن که توی همه مرورگر ها جواب میدن ولی دلیل نمیشه ازشون استفاده کنیم. یه سری چیزا هست که بهش میگن اصول حرفه ای طراحی
یک طراح بایدبا تغییرات جدید خودش رو هماهنگ کنه وگرنه توی رقابت حذف میشه

به هر حال اینها فقط پیشنهاد بود....
:rose:
 
caspianhero

caspianhero

Member
سلام دوستان: یک سئوال دیگه داشتم: فرض کنید شما یک قالب می خواهید با css طراحی کنید: و شما اولین دایو (wrapper)که تمام دایو ها را دربر می گیرد را width را 1200 پیکسل قرار می دهید: خب الان سئوال این هست اگر کسی مانیتورش 600*800 باشد تمام تصاویر را نامنظم و ناقص می بینند!!! خب برای اینکه به این مشکل نخوریم باید چه کار کنیم؟؟
سپاس
 
dexted

dexted

Active Member
سلام دوباره خدمت شما :)

این بحث همون بحثی هست که من توی پست 13 بهش اشاره کردم : یعنی طراحی Responsive که میشه گفت جدیدترین بحثی هست که توی زمینه طراحی وب سر زبون ها افتاده .
حالا طراحی Responsive یعنی چی ؟

یعنی اینکه شما سایت رو به گونه ای طراحی کنی که کاربر با مانیتور 10000*100000 تا کاربر با صفحه موبایل 5*8 بتونه سایت شما رو به گونه ای ببینه که نه تنها به هم ریختگی نداشته باشه
بلکه هیچ اسکرول افقی هم نداشته باشیم.

لینک زیر رو ببینید :
http://forum.majidonline.com/thread...دازه-صفحه-وب?p=1270657&viewfull=1#post1270657

تا حدودی بیشتر توضیح دادم اونجا :green:
:rose:
 
farik

farik

Well-Known Member
باسلام..
اگر چه که مدتیست کد ننوشتم ولی تا جایی که یادمه اینکار رو با float انجام میدادم...به هر حال یک سر به این خاصیت در w3school بزنین...
در ضمن با توضیحاتی که دوستان دادند باید با position در حالت relative و ست کردن اون در سمت چپ هم اینکار بشه..
موفق باشید...
 
caspianhero

caspianhero

Member
متشکر از دوستان:2 سئوال دیگه داشتم در مورد همین موضوع؟؟
1. ایا position همه ی المنت ها در حالت عادی relative هست؟؟(توی محیط experssion web)
2. در مورد نظراتی که دوستان در مورد رزولوشن گفتند : یک نظر داشتم: ایا اگر ما به wrapper اگر width : auto بدیم یا مثلا درصدی مثل %80 بدهیم : ایا درست می شود؟؟

سپاس
 
dexted

dexted

Active Member
سوال 1 - در مورد expression نمیدونم اما به طور پیش فرض position مقدار static داره
سوال 2- این فقط در مورد wrapper نیست ممکن هست تا حدودی درست بشه ولی بعضی جاها ممکنه دوباره مشکل بر بخورین
:rose:
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا