اشکالی در موقعیت دهی div
سلام دوستان، می خواستم با استفاده از float یا position abslout یا position fixed به top - right# مکان بدم، اما هر کاری می کنم که با صفحه html مکان دهی نمی شه بلکه center# موقعیت میگیره.
تشکر
سلام نوید. شما برای این که top-right بیاد و موقعیت خودش رو نسبت به عنصر والدش(که در اینجا body هست) تنظیم بکنه بهش top،right،left،bottom بدین. شما اومدین و right بهش دادین ولی چون بهش top و یا bottom ندادین، خودش بصورت پیش فرض این مقادیر رو اعمال کرده. از top:0 استفاده کنین.
<html>
<head>
<title>test</title>
<style>
*{
margin:0;
padding:0;
}
#top-right{
position:absolute;
background-color: gray;
right: 3px;
margin: 10px;
color: red;
cursor: pointer;
width: 250px;
top:10px;
}
#center{
text-align:center;
margin-top: 150px;
margin-bottom: 350px;
background-color: lime;
}
</style>
</head>
<body>
<div id="top-right">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div id="center">
some text
<br>
<br>
<br>
<br>
<br>
some text 2
</div>
</body>
</html>
دقت بفرمائید که دایو اول(top-right)، دایو دوم رو بعنوان والد در نظر نمیگیره!! این فقط ظاهر قضیه هست که اینطوری بنظر میرسه. شما اگه به یک دایو که position: absolute داره مقدار top و left و ... رو ندین، عنصر در همون جای پیشفرضش قرار مگیره. شما ضمن این که بهش right: 3px دادین، کافیه بهش بگین: top: 10px حالا میاد و از اون مقدار پیشفرضش خارج میشه و خودش رو با نزدیکترین جدش که خاصیتی به غیر از static داره، تنظیم میکنه. و چون اولین دایو شما، هیچ والدی نداره، به body و html نگاه میکنه و اونام چون static هستن بصورت پیشفرض، پس موقعیت خودش رو نسبت به viewport ست میکنه
<html>
<head>
<title>test</title>
<style>
*{
margin:0;
padding:0;
}
#top-right{
position:absolute;
background-color: gray;
right: 3px;
margin: 10px;
color: red;
cursor: pointer;
width: 250px;
top:10px;
}
#center{
text-align:center;
margin-top: 150px;
margin-bottom: 350px;
background-color: lime;
}
</style>
</head>
<body>
<div id="top-right">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div id="center">
<br>
some text 1
<br>
<br>
some text 2
<br>
<br>
</div>
</body>
</html>
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
