مشکل در مورد position (حل شد)
دوستان من قطعه کدی رو این جا قرار میدم اگه کسی وقتشو داشت ببینه اشکال من کجاست که وقتی میخوام دو لایه رو روی همدیگه قرار بدم لایه رویی اصلا دیده نمیشه با این روشی که من رفتم.
البته این روش رو همه جا همین طور آموزش داده بودن. لایه ای که زیر قرار داره position اون رو relative در نظر گرفتم و لایه ای که مثلا قراره رو باشه position اون رو absolute در نظر گرفتم. اما لایه رویی دیده نمیشه. این هم از قطعه کد:
<html>
<head>
<title>My Test</title>
<style>
body {
background: url("image/mainback.jpg");
margin: 0;
padding: 0;
}
.login-bg {
background:url(image/frm-login.png) no-repeat center;
position: relative;
top: 100px;
height: 317px;
}
.btn-login {
background:url(image/btn-login.png) no-repeat center;
position: absolute;
height: 64px;
top: 250px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-bg">
<div class="btn-login">
</div>
</div>
</body>
</html>
مقادیر absolute یا مطلق به معنی موقعیت عنصر از بالاترین تگ والد (معمولا body یا سند HTML) است.
از position با مقادیر absolute زمانی استفاده می کنیم که بخواهیم یک عنصر (به فرض بلاک div) نسبت به کل صفحه به صورت شناور کامل درآید، در این حالت عنصر به صورت پیش فرض به ابتدای سند HTML (گوشه بالای مرورگر) منتقل می شود و برای تنظیمات بیشتر می توان از خاصیت های left، right، top و bottom استفاده کرد.
relative : مقادیر relative یا نسبی به معنی موقعیت عنصر از تگ والد (تگی که عنصر، فرزند آن محسوب می شود) است.
از position با مقادیر relative زمانی استفاده می کنیم که بخواهیم یک عنصر نسبت به تگ والد خود به حالت شناور درآید، به فرض اگر دکمه ای داریم که می خواهیم با کلیک بر روی آن، یک باکس در زیر دکمه ظاهر شود، در این حالت باید از مقادیر relative استفاده کنیم.
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
