position در Css

[Dark Lord]

سلام دوستان ، ممنون میشم چند خطی در اینباره توضیح بدید ! جستجو هم کرم چیزی پیدا نشد . سوالاتم : 1 . کی از position استفاده میشه ؟ 2 . هر کدوم از دستوراتش چه زمانی استفاده میشند ؟ 3 . مگه یک شئ که خاصیت absolute داره نسبت به پنجره اصلی موقعیتش تظیم نمیشه ؟ پس چرا وقتی توی یک شی دیگه قرار میگیره نسبت به اون موقعیت پذیر میشه ؟ کلا اگر لطف کنید بگید کی از absolute و کی از relative استفاده میشه ممنون میشم . ممنون

[hamiii]

1.زمانی که بخوایم موقعیت یک عنصر رو توی صفحه معین کنیم.

2و3.همونطور که میدونید ویژگی position چندین مقدار میتونه بگیره بهمین دلیل استفاده های زیادی ازش میشه و یکی از مهمترین استفاده هایی که از position میشه تعیین موقعیت یک باکس نسبت به دیگریه، به عبارتی ترکیبی از دو position.

با یه مثال توضیح میدم : فرض کنید باکس 1 داخل باکس 2 قرار داره و می خوایم موقعیت باکس 1 را نسبت به باکس 2 به گونه ای تعیین کنیم که از بقیه عناصر مستقل باشه. برای اینکار به باکس مادر مقدار absolute رو میدیم و به باکس فرزند مقدار relative و با مقدار دادن به left و top باکس فرزند موقعیت اونو معین میکنیم.

مثال بالا فقط یکی از کاربردهای position هست،البته بیشترین استفاده رو هم که من تا حالا دیدم تو طراحی ها میشه همین حالت ترکیبیه چون تو همه ی مرورگرها (حتی ie6) جواب میده.ولی خب یه مشکلاتی هم ایجاد میکنه که وقتی باهاش کار کنی خودت بهش خواهی رسید.

یه نکته: position:fix موقعیت یک عنصر رو در صفحه ثابت می کنه ولی تو ie6 ساپورت نمیشه(که البته با یه مقدار جاوااسکریپت حل میشه)

سعی کن یه کمی با این ویژگی ها کار کنی همه چی دستت میاد.

موفق باشی
یاعلی

[Dark Lord]

بسیار ممنون ، واقعا لطف کردید . تقریبا بلدم باهاشون کار کنم تم هایی هم که میزنم همجا درست نشون داده میشه ولی با این حال احساس میکنم کدهام استاندارد نیست :D ممنون میشم درباره margin , padding , Top , left , ... هم یک توضیح بدید . اینکه چه زمانی استفاده میشند کافیه . من برای اینکه یک متن رو در وسط یک div نمایش بدم ( عمودی ) از padding-top استفاده میکنم ، که در این صورت مجبور میشم همون قدر که padding میدم از height کم کنم این کار درسته ؟ ( استاندارده ؟ ) خوب حالا این دو تصویر رو یک نگاه کنید : میخوام div فرزند بچسبه به انتهای div والد خوب تا اینجا با absolute و bottom : 0 حله . http://016.img98.net/out.php/i86822_1.png عکس دوم : میخوام در صورتی که div والد بزرگ شد به همون اندازه div فرزند هم بزرگ بشه ! یعنی همونجایی که فلش هست شروع div باشه ، با درصد سعی کردم ، جواب نداد . http://016.img98.net/out.php/i86823_2.png سوال دیگه این هست که چطور وقتی position : absolute هست div فرزند رو بیاریم وسط والد : margin:0px auto و margin-left:auto margin-right:auto جواب ندادن ! الان ارز div والد رو از فرزند کم میکنم تقسیم بر دو و به left میدم ... خیلی زحمت دادم ، ممنون .

[raika17metal]

بسیار ممنون ، واقعا لطف کردید . تقریبا بلدم باهاشون کار کنم تم هایی هم که میزنم همجا درست نشون داده میشه ولی با این حال احساس میکنم کدهام استاندارد نیست :D ممنون میشم درباره margin , padding , Top , left , ... هم یک توضیح بدید . اینکه چه زمانی استفاده میشند کافیه . من برای اینکه یک متن رو در وسط یک div نمایش بدم ( عمودی ) از padding-top استفاده میکنم ، که در این صورت مجبور میشم همون قدر که padding میدم از height کم کنم این کار درسته ؟ ( استاندارده ؟ ) خوب حالا این دو تصویر رو یک نگاه کنید : میخوام div فرزند بچسبه به انتهای div والد خوب تا اینجا با absolute و bottom : 0 حله . http://016.img98.net/out.php/i86822_1.png عکس دوم : میخوام در صورتی که div والد بزرگ شد به همون اندازه div فرزند هم بزرگ بشه ! یعنی همونجایی که فلش هست شروع div باشه ، با درصد سعی کردم ، جواب نداد . http://016.img98.net/out.php/i86823_2.png سوال دیگه این هست که چطور وقتی position : absolute هست div فرزند رو بیاریم وسط والد : margin:0px auto و margin-left:auto margin-right:auto جواب ندادن ! الان ارز div والد رو از فرزند کم میکنم تقسیم بر دو و به left میدم ... خیلی زحمت دادم ، ممنون .

خاصیت Left فاصله از عنصر سمت چپ (این عنصر میتونه یک Div یا خود صفحه باشه)
خاصیت Top فاصله از عنصر بالا (این عنصیر میتونه یک Div یا خود صفحه باشه)
خاصیت margin فاصله یک عنصر از یه عناصر دیگه که خود این خاصیت به چهار بخش تقسیم میشه : margin-top، margin-right، margin-left و margin-bottom
خاصیت padding فاصله محتوای عناصر از خود عنصر رو تعیین میکنه،
برای مثال اگه میخوای متن داخل تگ Div از حاشیه های این تگ کمی فاصله داشته باشه باید خاصیت padding رو مقدار دهی کنی اما اگر قصد داری خود Div از سایر عناصر فاصله داشته باشه باید خاصیت margin رو تعیین کنی.

[hamiii]

من برای اینکه یک متن رو در وسط یک div نمایش بدم ( عمودی ) از padding-top استفاده میکنم
کار درستی انجام میدین،فقط اگه میخواین با تغییر ارتفاع باکستون باز هم تو وسط قرار بگیره بهتره از درصد برای مقدار دهی استفاده کنین.مثلا:

padding-top:50%


در این صورت مجبور میشم همون قدر که padding میدم از height کم کنم این کار درسته ؟
درسته.معمولا در صورتی که بخواهیم به یک باکس حاشیه داخلی بدیم(padding) باید اول padding رو مقدار بدیم،بعد بر اساس اون height یا width رو تعیین کنیم.(دقیقا همون کاری که شما کردین.) ولی یه راه دیگه هم هست و اون اینه که height و width رو مقدار اصلی مورد نظر بدین،padding رو هم صفر کنید سپس به عناصر داخلی به همون اندازه که می خواستین حاشیه درونی داشته باشین margin بدین. اینجوری دیگه width و height تغییر نمیکنه.


میخوام div فرزند بچسبه به انتهای div والد
روشی که بکار بردین درسته فقط در صورتی که برای div مادر مقدار position رو برابر با relative بگیریم.اگر این کار را نکنیم div فرزند نسبت به body موقعیت مطلق پیدا خواهد کرد و به انتهای body میچسبه.امتحان کنین.نکته ی دیگه ای که هست اینه که از این روش معمولا برای footer سایتها استفاده میشه و در صورتی که محتوای div مادر افزایش پیدا کنه تا جایی که height رو افزایش بده،این محتوا به زیر footer خواهد اومد که برای حل این مشکل باید به div مادر padding-bottom مناسب بدیم.

یه راه ساده تر که غالبا استفاده میشه و هیچ کدوم از این دردسرها رو نداره استفاده از clear:both هست.امتحان کنید.


میخوام در صورتی که div والد بزرگ شد به همون اندازه div فرزند هم بزرگ بشه !
این امکان فقط بصورت برعکس وجود داره.یعنی با افزایش div فرزند div مادر هم بزرگتر بشه.
ولی این چیزی که شما میخواین انجام بدین با .مcss امکان نداره.حتما باید از جاوااسکریپت هم کمک بگیرین.یادمه قبلا تو همین تالار بحثش شد.یه سرچ بزنین،دوستان راه حل های خوبی نوشته بودند که من خاطرم نیست.


سوال دیگه این هست که چطور وقتی position : absolute هست div فرزند رو بیاریم وسط والد
دوست عزیز این سوالتون زیادی ایهام داره.اولا اینکه absolute مربوط به مادره یا فرزند؟ دوما div فرزند رو میخواین نسبت به ارتفاع تو وسط قرار بدین یا نسبت به به عرض؟

همونطور که قبلا گفتم استفاده از ویژگی position تو سایتهای داینامیک مشکلاتی داره که کم کم دارین بهش میرسین:چشمک:،من که زیاد تو طراحی هام استفاده نمیکنم،جز تو موارد خاص!

موفق باشین
یاعلی

[Dark Lord]

دوست عزیز این سوالتون زیادی ایهام داره.اولا اینکه absolute مربوط به مادره یا فرزند؟ دوما div فرزند رو میخواین نسبت به ارتفاع تو وسط قرار بدین یا نسبت به به عرض؟

div فرزند absolute هست ، و میخوام در وسط div والد قرار بگیره ( عرض ) .

[hamiii]

absolute یعنی مستقل.
وقتی این ویژگی رو به یک باکس میدی یعنی از همه چی مستقلش می کنی.بهمین دلیل نمیتونی نسبت به یه خاص (مثلا مادرش) موقعیتش رو تغییر بدی.
برای این کار میتونی یه حقه بزنی،دقیقا عین کاری که خودت کردی.ولی مشکل اصلی تو این روش اینه که با تغییر رزولیشین جای باکس عوض میشه.برای تست میتونی سایز مرورگرت رو تغییر بدی تا متوجه مشکل بشی.

پس به این نتیجه می رسیم که موقعیت یک باکس نمیتونه هم مستقل و هم وابسته باشه.

موفق باشی
یاعلی

[Dark Lord]

استفاده از این روش چطوره ، قبلا از این استفاده میکرم ! استاندارده ؟!


position : absolute ;
left:50%;
margin-left: - width/2;

نمونه :


<html>
<head>
<title>Test</title>
<style>
#a{
position:relative;
width:200px;
height:400px;
margin:0px auto;
background-color:blue;
}

#b{
position:absolute;
width:100px;
height:300px;
left:50%;
margin-left:-50px;
background-color:red;
bottom:0px;
}
</style>
</head>
<div id="a">
<div id="b"></div>
</div>
</html>

فرق margin-left و ... با left و ... چیه ؟ margin نصبت به بقیه left مستقل موقعیت رو مشخص میکنه ؟

[hamiii]

استفاده از این روش چطوره ،
هیچ فرقی با روش قبلیتون نداره که.بالاخره شما دارین از margin استفاده میکنین.


فرق margin-left و ... با left و ... چیه ؟
left و right زمانی استفاده میشه که شما موقعیت باکستون رو نسبی کردین یا به عبارتی از ویژگی position استفاده کردین.ولی margin در حالت عادی بکار برده میشه.هر دو فاصله خارجی تا border باکس رو تعیین میکنن.

[Dark Lord]

مرسی ، کی از float استفاده میشه ؟ :لبخند: وقتی از position استفاده نمیشه یا relative هست ؟

[hamiii]

وقتی از float استفاده می کنی قاعدتا نباید از position استفاده کنی.

[Dark Lord]

بسیار ممنون ، واقعا لطف کردید ...