موقعیت دهی تگ div با position

Question

موقعیت دهی تگ div با position

سوال شده 9 سال قبل در برنامه نویسی توسط IMANAZADI (72 امتیاز)
ویرایش شده 9 سال قبل توسط Saeed Zarinfam

با سلام

یک سوال بد جوری داغونم کرده

مگر position:relative موقعیت عنصر رو نسبت به تگ body در نظر نمیگیره
و اینکه position :absolute موقعیت عنصر رو نسبت به تگ والد یا همون تگ پدر

در زیر دو div تو در تو داریم
چرا در کد زیر ، div آبی که position :relative داره رو نسبت به دایو پدر (قرمز رنگ) موقعیت میده ؟؟؟ مگر نباید بیاد از بالا نسبت به تگ boyd موقعیت دهی کنه ؟؟

<body>


<div style="background-color:#C36; width:200px; height:200px; position:relative;top:200px; left:80px;">


<div style="background-color:#06F; width:50px; height:50px; position:relative; top:30px;">

</div>

</div>

</body>

اینم عکس

کجای کارم اشتباهه ؟

من میخوام دایو آبی رو نسبت به تگ body موقعیت دهی کنم یعنی نسبت به ابتدای صفحه

1 پاسخ

پاسخ داده شده 9 سال قبل توسط ایمان (4.9هزار امتیاز)
انتخاب شده 9 سال قبل توسط IMANAZADI

بهترین پاسخ

موقعیت دهی به صورت relative عنصر را نسبت به جایی که به صورت پیش‌فرض باید قرار می‌گرفته تنظیم می‌کند. اینجا div دوم بدون استفاده از position:relative; top:30px;‎ داخل div اول قرار می‌گیرد. با تنظیم position:relative; top:30px;‎ سی پیکسل از جایی که هست فاصله می‌گیرد و پایین می‌آید.

موقعیت دهی به صورت absolute عنصر را نسبت به تگ پدری که به صورت absolute یا relative تنظیم شده باشد قرار می‌دهد. اگر چنین تگ والدی نباشد نسبت به body تنظیم می‌شود.

با استفاده از مقدارهای منفی می‌توانیم div2 را جایی که مورد نظرمان است قرار بدهیم. jsfiddle

<head>
<style>
.div1 {
    position:relative;
    top:200px;
    left:80px;
    background-color:#C36; width:200px; height:200px;
}
.div2 {
    position:relative;
    top:-170px; /* 200px - 30px = 170px */
    background-color:#06F; width:50px; height:50px;
}
</style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>