نسبت position به position دیگر

[IMANAZADI]

با سلام

دوستان من کلا با این position مشکل دارم

اصلا متوجه نمیشم

چند تا سوال دارم لطفا راهنمایی کنید

div های زیر رو در نظر بگیرید



<div id="a" style="position:absolute; left:50px; top:90px;" > a</div>
<div id="b" style="position:relative; left:55px; top:95px;" > b</div>






<div id="c" style="position:relative; left:170px; top:140px;" > c


<div id="cc" style="position:relative; left:60px; top:110px;" > cc</div>
<div id="ccc" style="position:absolute; left:75px; top:120px;" > cc</div>


</div>






<div id="d" style="position:absolute; left:170px; top:190px;" > d


<div id="dd" style="position:relative; left:95px; top:150px;" > dd</div>
<div id="ddd" style="position:absolute; left:105px; top:165px;" > ddd</div>


</div>




<div id="e" > e


<div id="ee" style="position:relative; left:95px; top:150px;" > ee</div>
<div id="eee" style="position:absolute; left:105px; top:165px;" > eee</div>


</div>




1- دایو a با position -> absolute نسبت به چه عنصری left , top میگیره ؟؟

2-دایو b با position -> relative نسبت به چه عنصری left , top میگیره ؟؟

3-دایو cc با position -> relative که فرزند دایو c با position -> relative می باشد ، نسبت به چه عنصری left , top میگیره ؟؟

4-دایو ccc با position -> absolute که فرزند دایو c با position -> relative می باشد ، نسبت به چه عنصری left , top میگیره ؟؟

5-دایو dd با position -> relative که فرزند دایو d با position -> absolute می باشد ، نسبت به چه عنصری left , top میگیره ؟؟

6-دایو ddd با position -> absolute که فرزند دایو d با position -> absolute می باشد ، نسبت به چه عنصری left , top میگیره ؟؟

7-دایو ee با position -> relative که فرزند دایو e که بدون position می باشد ، نسبت به چه عنصری left , top میگیره ؟؟

8-دایو eee با position -> absolute که فرزند دایو e که بدون position می باشد ، نسبت به چه عنصری left , top میگیره ؟؟



لطفا توضیح دهید هر position نسبت به position دیگه در چه مکانی قرار میگیره

[anvar]

زمانی که شما موقعیت یک عنصر را absolute تعیین می کنید - یعنی موقعیت این عنصر وابسته به موقعیت نزدیک ترین والد (اولین والد بالاتر از خودش) موقعیت داده شده است(position آن توسط شما به یکی از 3 حالت به استثناء static ست شده باشد -بصورت پیش فرض موقعیت عنصر static است) . اگر همچنین والدی وجود نداشته باشد body صفحه نقش والد را بازی می کند (اگر کدهای بالای شما مستقیما در تگ body صفحه قرار گرفته باشند کنترل div با id=a همچنین وضعیتی خواهد داشت و 50 پیکسل از چپ و 90 پیکسل از بالای body فاصله خواهد گرفت)

زمانی که موقعیت یک عنصر به relative ست می شود یعنی نسبت به موقعیت نرمال خودش موقعیت جدیدی خواهد گرفت ( در این حالت اگر left - top و غیره را ست کنیم یعنی از موقعیت طبیعی و نرمال خودش به مقادیر ست شده تغییر موقعیت خواهد داد) الان در کدهای شما کنترل div با id=b که موقعیتش به relative ست شده است نسبت به موقعیت نرمال خودش جای جدید می گیرد و موقعیت نرمال آن هر کجا باشد به اندازه 55 پیکسل از چپ و 95 پیکسل از بالای آن موقعیت می گیرد و در همین نقطه جدید قرار خواهد گرفت

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