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

+1 رأی
میانگین بازدید روزانه 0.471,128 بازدید

با سلام

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

مگر 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 موقعیت دهی کنم یعنی نسبت به ابتدای صفحه

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

1 جواب

+1 رأی
 
بهترین جواب

موقعیت دهی به صورت 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>
جواب 6 سال قبل توسط ایمان (4,837 امتیاز)
انتخاب شده در 6 سال قبل توسط IMANAZADI

سوال های مشابه

0 رأی
1 جواب میانگین بازدید روزانه 0.18474 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 0.27748 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 2.537,195 بازدید
سوال 7 سال قبل در تالار برنامه نویسی توسط مسافر (907 امتیاز)
0 رأی
2 جواب میانگین بازدید روزانه 0.35835 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 0.4968 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 0.581,458 بازدید
سوال 6 سال قبل در تالار برنامه نویسی توسط IMANAZADI (72 امتیاز)
+1 رأی
0 جواب میانگین بازدید روزانه 0.12307 بازدید
0 رأی
1 جواب میانگین بازدید روزانه 0.15393 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 1.584,165 بازدید
0 رأی
1 جواب میانگین بازدید روزانه 0.08208 بازدید
کانال تلگرام جواب یاب
...