عدم عملکرد صحیح ویژگی position با مقدار fixed
سوال جدیدباسلام!
۱٫ چرا با وجود اینکه کدها رو به درستی تنظیم و به ویرایش قالبم انتقال دادم، اما منوی شناور در وبم نشان داده نمیشه بلکه هرجایی میذارم همانجا با اسکرول صفحه جابجا میشه و ثابت نمیمونه؟ خیلی گشتم که با کدام کد یا اسکریپت قبلی تداخل داره اما چیزی خاصی نتونستم پیداکنم. هرچی هم شک داشتم از قالب حذف کردم و توفیقی نداشتم با مرورگرها و سیستمهای مختلف هم چک میکردم تا مطمئن شدم کد سالمه و مشکلی نداره و فقط در این صفحه نمی تونم استفاده کنم. لطفا در این زمینه راهنمایی ام بفرمائید. خیلی ممنون میشم!
آدرس صفحه ای که می خواهم کد بلاک شناور را در آن استفاده کنم: http://taleshblog.ir/xp/categories
کدهایی که استفاده کردم برای منوی شناور اینها هستند:
div.floating-menu {
position: fixed !important;
right: 10px;
top: 100px;
width: 150px;
z-index: 100;
}
div.floating-menu a,
div.floating-menu h3 {
display: block;
margin: 0 0.5em;
}
<div class="floating-menu">
<div class="zmenu">
<cbtn>
<br>
<span class="pplink"><a href="#dailylinks">پیوندهای پیشنهادی</a></span>
<span class="nslink"><a href="#packages">بستههای خبری</a></span>
<span class="pblink"><a href="#hits">مطالب پربازدید</a></span>
<span class="fmlink"><a href="#ForumNewTopics">باشگاه نویسندگان</a></span>
<br>
</cbtn>
</div>
</div>
سلام
این مشکل به خاطر ویژگی filter که به body داده شده است، اتفاق می افتد. در واقع اینجا، محل قرار گیری منو، به جای اینکه نسبت به viewport ثابت شود، نسبت به عنصر body ( نزدیک ترین عنصر والدی که دارای خصوصیت filter یا transform یا will-change می باشد ) تعیین می شود و در نتیجه با اسکرول هم حرکت می کند . برای باکس تبلیغاتی هم، همین اتفاق افتاده.
گزینه ۴ این قسمت از مطلب containing block به این موضوع اشاره دارد.
خیلی ممنونم از پاسخ کاملا صحیح و فوری شما هرچند بنده دیر دیدم و تصور میکردم کسی به زودی راهنمایی نمیکنه.
راستش من به دلیل علاقه ای که به کدنویسی وب دارم چندسالی هست بصورت تجربی از طریق سایتها (ازجمله همین سایت بسیار خوب «ترفندهای سی اس اس») مشغول یادگیری html و css هستم و شاید جالب باشه که بگم همون فیلتری که توی «بادی» قالب گذاشته بودم رو بنظرم از همین سایت یادگرفته بودم. از این خوشم اومده بود که میشد یکباره رنگ کل سایت یا بخشی رو تغییر داد و باخودم میگفتم که از این کد برای نمایش سیاه و سفید وبم توی یه روزی مثل عاشورا برای ابراز عزاداری بصورت نمادین استفاده کنم.
به هرحال ممنونم از راهنمایی تون، لطف کردید. همچنین تشکر میکنم از همه تیم مدیریت و اعضای فعال سایت «ترفندهای css» که باعث پویایی و رونق این سایت و دلگرمی کاربران آماتوری مثل بنده هستند.
سلامت و شاداب باشید!