محمد
4 ماه پیش توسط محمد مطرح شد
10 پاسخ

حل مشکل پوزیشن sticky

سلام وقت بخیر
من یه سایت وردپرسی دارم. می خوام از طریق قسمت css اضافه کدی رو به سایتم اضافه کنم که هدر سایت چسبان بشه.
این کد رو الان وارد کردم ولی مشکل اینجاست که قسمت بالایی صفحه میره زیر هدر و نمایش داده نمیشه

header {
justify-content: space-between;
padding: 0rem 0rem;
position: fixed;
top: 0px;
width: 100%;
z-index: 9999;
}

ممنون میشم راهنماییم کنید.


ثبت پرسش جدید
محمد حسینی
@lu1362 4 ماه پیش آپدیت شد
-1

سسلام این مشکل معموللا بخاطر z-index هست .داخل کدتون ازش استفاده کردید و نباید این مشکل رو داشته باشید. اعدادش رو یه خورده بالا پایین کنید باید حل بشه . کدتون رو هم یه خورده میشه تغییر داد .از سمت راست هم صفرش کنید بهتره . به z-index هم یه !important بدید شاید حل بشه .

header {
justify-content: space-between;
padding: 0;
position: fixed;
top: 0;
right:0;
width: 100%;
z-index: 9999 !important;
}

محمد
@ermiya-mim 4 ماه پیش مطرح شد
0

سلام مجدد. کاری که گفتین انجام دادم ولی مشکل حل نشد متاسفانه. می‌خوام قسمت بدنه سایت بیاد دقیقا از زیر هدر شروع بشه ولی الان متاسفانه بدنه و هدر سایت از یه قسمت شروع میشن که قسمتی از بدنه میره زیر هدر


محمد حسینی
@lu1362 4 ماه پیش مطرح شد
-1

خوب این فرق کرد. این مورد بخاطر اینه که position: fixed; دادید. باید position: sticky; بدید .


F.S
تخصص : طراح سایت
@m.DVLOPER 4 ماه پیش مطرح شد
0

بینید اون بخش هدر که بخواید زیر بخش های داخلی main نره باید زیر کد های mainقرارش بدید من این طور کردم درست شد


محمد
@ermiya-mim 4 ماه پیش مطرح شد
0

ممنون محمد جان. ولی پوزیشین استیکی رو قبول نمی کنه واسه من. تصویرشو زمیمه کردم
 تصویر


محمد حسینی
@lu1362 4 ماه پیش مطرح شد
0

اینجا خییلی راحت توضیح داده


محمد
@ermiya-mim 4 ماه پیش مطرح شد
0

محمد جان لطفا این عکس رو ببین. نمی دونم چرا این اررور رو میده

 تصویر


محمد حسینی
@lu1362 4 ماه پیش آپدیت شد
0

کد کار می کنه ؟ کدوم ویرایشگره ؟


محمد
@ermiya-mim 4 ماه پیش مطرح شد
0

المنتور. نه کد کار نمی کنه


محمد حسین
تخصص : وردپرس کار
@smhma 4 ماه پیش آپدیت شد
0

سلام محمد جان
دوتا جواب برا سوالت دارم.
یکی اینکه اگه با المنتور طراحی میکنی، از قسمت پیشرفته و تب موشن افکت میتونی سکشن رو چسبان کنی بالا. اصلا نیاز به کد زنی نداری.
جواب دوم هم برا وقتی که بخوای سی اس اس بزنی و درباره کدی که پرسیدی.
ببین خود المنتور وقتی میخواد یه سکشن رو فیکس کنه بالا، دقیقا از همون سکشن یه کپی دیگه میگیره و تکثیر میکنه و visibility شو hidden میکنه. اینطوری مشکلت حل میشه.
برای توضیح بیشتر، کدت اصلا مشکلی نداره. فقط از هدرت یه داپلیکیت بگیر و زیر هدرت بنداز. این هدری که تکثیر کردی رو این کدو براش بزن:
selector{visibility: hidden;}
فقط حواست باشه این کدو به خود سکشنی که تکثیر کردی بدی.
اینطوری مشکلت حل میشه دادا
نکتش اینه که این سکشنی که کپی سکشن بالا یعنی هدرته مخفی میشه ولی از بین نمیره. یعنی فضاش اشغال نمیشه. و محتوای بعدی همون پایین میمونن.
hidden شدن این خصوصیت رو داره برخلاف display:none که فضاش هم اشغال میشه.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام