یه مشکل کوچیک در navbar من
سلام معمولا در html اینجوریه که مثالا شما وقتی یک المنت رو مینویسی و اونو تمام میکنی و میری خط بعدی یک المنت دیگه رو مینویسی اصولش اینه که دومین المنت زیر اولین المنت نمایش داده میشه و برای من هم معمولا اینطوری هستش و مشکلی ندارم ولی یک navbar دارم که زیرش تو html هر المنتی مینویسم میره زیر navbar و مجبورم بهش margin-top بدم تا درست بشه ولی بعد از اون همه چی اوکی میشه و مشکلی ندارم میخاستم دلیلش رو بدونم کدش رو زیر میزارم انلاین نگاه کنین ممنون میشم تو این مورد هم کمکم کنین. البته ناگفته نماند که تا اونجایی که من آزمون و خطا کردم مشکل از کلاس fixed-top هستش که رو navbar هستش وقتی ورمیدارم دیگه درست میشه ولی وقتی هستش انگار چون fixed هستش به عنوان block حساب نمیشه و بقیه المنت ها میرن زیرش.
پاسخها
7
@iaghapor1994
سلام دوست عزیز
المنت ها در css اگه display: block داشته باشن طبق یک flow پشت سر هم قرار میگیرن
مثلا اگه 2تا المنت قرار بدی ، المنت دومی زیر المنت اول قرار میگیره.
ولی وقتی به یکی از المنت ها پوزیشن میدیم مثل position:fixed یا position:absolute، اون المنت از flow عادی خارجی میشه و دیگه پشت اون المنت قبلیش قرار نمیگیره و المنت هایی که بعدش اومدن زیر اون المنت میرین (بخاطر همین مجبوری که margin-top بدی)
مقاله زیر رو مطالعه کن تا کار با position ها رو یادبگیری
http://css-tricks.ir/reference/position/
https://css-tricks.ir/reference/z-index/
چون position رو برابر fixed قرار میده داخل css و بعدشم تمام فاصله ها رو از بالا برای آن object صفر میکنه و به z-index یه مقدار خیلی زیاد میده که همیشه روی نوشته ها باشه.
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
مشکل حل شد ممنون از شما دوستان عزیز.
دوستان مشکل حل شد ولی یکی دیگه جاش رو گرفت به عکس زیر توجه کنید من یک کادر هشدار دارم :
http://imgurl.ir/uploads/g503059_1.jpg
خوب به دلیل فیکس بودن navbar من مجبور شدم به کادر هشدار خودم margin-top: ۶rem بدم خوب تا اینجا هیچ مشکلی نیست مشکل از اونجا شروع میشه که من برای این کادر هشدار یک دکمه بستن کادر هشدار اختصاص دام و وقتی روش کلیک میکنم و کادر بسته میشه المنتی که زیر کادر هشدار هستن یعنی بخش پست ها و سایدبار میرن زیر navbar ... لطفا به عکس زیر هم توجه کنید :
http://imgurl.ir/uploads/r22237_2.jpg
خب برای حل این مشکل من یک div ساختم و قسمت پست ها و سایدبار رو داخل اون قرار دادم با این روش پس از بسته شدن کادر هشدار، همچنان یک div وجود داره که با navbar از بالا فاصله داره و مشکل تا اینجا حل شد ولی مشکل دیگه ای که با این کار وجود اومد اینه که من به سایدبار و یکی از المن های دیگه خاصیت order دادم که دیگه کار نمیکنه در صورتی که قبل اینکه div رو بزارم قشنگ داشت کار میکرد اگه کسی کدهای قالب رو میخاد و حرفه ای هستش لطفا به ایمیل من یا آیدی تلگرام من پیام بده خیلی خیلی ممنون :
ID TELEGRAM : imaniy1
وقتی کلید بسته شدن کادر رو مینید دقیقا اون کادر چه تغییراتی براش اعمال میشه منظورم اینه که کلا از صفحه حذف میشه یا اینکه داخل css دستکاری می کنید؟
اون کادر کلا از صفحه حذف میشه :
<div id="margin-t">
<div class="alert alert-info alert-dismissible fade show text-center">
<button type="button" class="close" data-dismiss="alert">×</button>
برای همکاری با سایت ما لطفا توسط لینک رو به رو با ما در ارتباط باشید <a href="#" class="alert-link">لینک +</a>
</div>
پیشنهاد میکنم برای رفع مشکل اون قسمت div رو که گفتین بعدا برا پست ها اضافه کردید پاک کنید و به جای حذف این پیام از صفحه تو css visibility رو بعد از کلیک hidden کنید. احتمالا مشکل حل میشه.