مشکل کلاس fixed-top در navbar در قالب من

سلام معمولا در html اینجوریه که مثالا شما وقتی یک المنت رو مینویسی و اونو تمام میکنی و میری خط بعدی یک المنت دیگه رو مینویسی اصولش اینه که دومین المنت زیر اولین المنت نمایش داده میشه و برای من هم معمولا اینطوری هستش و مشکلی ندارم ولی یک navbar دارم که زیرش تو html هر المنتی مینویسم میره زیر navbar و مجبورم بهش margin-top بدم تا درست بشه ولی بعد از اون همه چی اوکی میشه و مشکلی ندارم میخاستم دلیلش رو بدونم کدش رو زیر میزارم انلاین نگاه کنین ممنون میشم تو این مورد هم کمکم کنین. البته ناگفته نماند که تا اونجایی که من آزمون و خطا کردم مشکل از کلاس fixed-top هستش که رو navbar هستش وقتی ورمیدارم دیگه درست میشه ولی وقتی هستش انگار چون fixed هستش به عنوان block حساب نمیشه و بقیه المنت ها میرن زیرش.

https://liveweave.com/#&togetherjs=VgqJ9oCjaG

پاسخ ها

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

سلام.

وقتی ویژگی position یک المنت (مثلا یک div یا navbar) روی حالت fixed قرار میگیره، شما با این ویژگی میتونید المنتتون رو هر جای صفحه قرار بدید و این عمل هیچ تاثییری روی بقیه المان ها نمیزاره و در حالت پیشفرض روی بقیه المان ها میفته (میتونید با خاصیت z-index اون رو به زیر بقیه المان ها نیست ببرید). در واقع این مشکل fixed-top نیست و یه جورایی خاصیتش هست :)

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

شک داشتم رو همین موضوع و با کمک شما بیشتر درباره این خاصیت فهمیدم فقط هنوز من مشکلم حل نشد به عکس زیر توجه کنید من یک کادر هشدار دارم :

http://imgurl.ir/uploads/g503059_1.jpg

خوب به دلیل فیکس بودن navbar من مجبور شدم به کادر هشدار خودم margin-button: ۶rem بدم خوب تا اینجا هیچ مشکلی نیست مشکل از اونجا شروع میشه که من برای این کادر هشدار یک دکمه بستن کادر هشدار اختصاص دام و وقتی روش کلیک میکنم و کادر بسته میشه المنتی که زیر کادر هشدار هستن یعنی بخش پست ها و سایدبار میرن زیر navbar ... لطفا به عکس زیر هم توجه کنید :

http://imgurl.ir/uploads/r22237_2.jpg

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

برای فیکس کردن این باگ راه خیلی زیاده ولی یکی از بهترین راه ها این هستش که شما یک div بسازید و بهش خاصیت margin-top یا padding-top بدید و کل محتوای اصلی و کادر هشدارتون رو توی این div قرار بدید. (دیگر نیازی به margin-buttom کادر هشدار نیست، آن را پاک کنید)

با این روش پس از بسته شدن کادر هشدار، همچنان یک div وجود داره که با navbar از بالا فاصله داره.

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

ممنون از شما استاد عزیز.

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

دوست عزیز مشکل با این روش حل شد فقط چیز عجیب اینه که وقتی این div رو اضافه کردم دیگه خاصیت order من کار نمیکنه چرا؟

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

سلام.

با تشکر از جناب کامکار.

من دقیقا کدهای css تون رو ندیدم ولی خودم معمولا با اضافه کردن margin به المنتی که همیشه وجود داره این موضوع رو هندل میکنم. مثلا المنت های غیر از نوبار رو داخل یه div میبرم و به این div یه margin یا padding میدم. همچنین این کار رو با سلکتور < هم میتونید انجام بدید به این صورت که به هر المنتی که بعد از نوبار قرار میگرفت margin یا padding خاصی رو اختصاص بدید. به این صورت دیگه فرقی نمیکنه که اون المنت باشه یا حذف بشه. اگر حذف شد این حاشیه به المنت جایگزینش اختصاص پیدا میکنه.

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

دوستان قصد اسپم ندارم ولی فقط همین یک مشکل مونده تو قالبم که واقعا رو مخه.

online-support-icon