مشکل position در CSS

اینم از کد‌های پروژه:

HTML

    <header class="header">
        <div class="wrapper header__wrapper">
            <div class="container header__container">

                <div class="logo">
                    <a href="index.html">
                        <img src="assets/images/logo/logo.png" alt="gdita website logo" class="logo__img">
                    </a>
                </div>

                <nav class="primary-menu">
                    <ul class="primary-menu--wrapper">
                        <li class="primary-menu__item"><a class="primary-menu__item-link" href="">صفحه اصلی</a></li>

                        <li class="primary-menu__item"><a class="primary-menu__item-link" href="">خدمات</a>
                            <ul class="primary-menu__nested">
                                <li><a class="primary-menu__item-link-2" href="">طراحی وبسایت</a></li>
                                <li><a class="primary-menu__item-link-2" href="">توسعه وب</a></li>
                                <li><a class="primary-menu__item-link-2" href="">بازاریابی و سئو</a></li>
                                <li><a class="primary-menu__item-link-2" href="">توسعه کسب‌وکار</a></li>
                            </ul>    
                        </li>

                        <li class="primary-menu__item"><a class="primary-menu__item-link" href="">نمونه کارها</a></li>

                        <li class="primary-menu__item"><a class="primary-menu__item-link" href="">وبلاگ</a>
                            <ul class="primary-menu__nested">
                                <li><a class="primary-menu__item-link-2" href="">توسعه وب</a></li>
                                <li><a class="primary-menu__item-link-2" href="">بازاریابی و مارکتینگ</a></li>
                                <li><a class="primary-menu__item-link-2" href="">رابط کاربری</a></li>
                                <li><a class="primary-menu__item-link-2" href="">سئو</a></li>
                            </ul>    
                        </li>

                        <li class="primary-menu__item"><a class="primary-menu__item-link" href="">درباره ما</a></li>
                        <li class="primary-menu__item"><a class="primary-menu__item-link" href="">تماس با ما</a></li>
                    </ul>
                </nav>

                <div class="contactUs">
                    <a href="#" class="contactUS__button">
                        <div class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 3.75v4.5m0-4.5h-4.5m4.5 0-6 6m3 12c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 0 1 4.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 0 0-.38 1.21 12.035 12.035 0 0 0 7.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 0 1 1.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 0 1-2.25 2.25h-2.25Z" />
                            </svg>                                  
                        </div>
                        <span>0910 101 5040</span>
                    </a>
                </div>

            </div>
        </div>
    </header>
    <section class="themeSection heroSection" id="heroSection">
        <div class="wrapper">
            <div class="container">

                <div class="heroSection__main">

                    <div class="heroSection__content">
                        <h1 class="heroSection__title">ما راه حل های دیجیتالی واقعا خلاقانه را ارائه می دهیم</h1>
                        <p class="heroSection__description">
                            ما دنیای واقعی و دیجیتال را با ایجاد تجربیات عالی که برای مردم در زندگی روزمره اهمیت دارد، متحد می کنیم.
                        </p>
                    </div>

                    <div class="heroSection__img">
                        <img src="assets/images/hero/layer.png" alt="digital agency">
                    </div>

                </div>

            </div>
        </div>
    </section>

CSS

/* <header-layout> */
.header {
    max-width: 1250px;
    width: 1250px;
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #eee;
    backdrop-filter: blur(5px);
    z-index: 1000;
}
.header__container {
    display: flex;
    align-items: center;
}
.header__wrapper {
    padding: 15px 0px;
    /* position: relative; */
}
/* </header-layout> */

/* <navigationMenu> */
.primary-menu {
    margin: 0 25px 0 auto ;
}
.primary-menu--wrapper {
    display: flex;
    align-items: center;
}
.primary-menu__item {
    margin: 0 8px;
    position: relative;
}
.primary-menu__item-link {
    padding: 8px 16px;
    font-size: var(--normal-txt-md);
    transition: 0.35s;
    border-radius: 10px;
}

.primary-menu__item-link:hover {
    color: var(--txt-colorHover);
    background-color: rgba(255, 122, 13, 0.05);
}

    /* <nestedMenu> */
.primary-menu__nested {
    width: 200px;
    min-width: 200px;
    position: absolute;
    right: 15px;
    top: calc(100% + 60px);
    opacity: 0;
    visibility: hidden;
    padding: 10px 0;
    background-color: rgba(255, 122, 13, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px 0;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(49, 45, 45, 0.25);
    transition: 0.35s;
    z-index: 1000;
}
.primary-menu__item:hover .primary-menu__nested {
    right: 0;
    top: calc(100% + 30px);
    opacity: 1;
    visibility: visible;
}
.primary-menu__item-link-2 {
    display: block;
    width: 100%;
    padding: 10px 15px;
    transition: 0.35s;
    border-radius: 5px;
}
.primary-menu__item-link-2:hover {
    z-index: 100;
    background-color: rgba(255, 122, 13, 0.2);
    transform: translateX(-5px);
}
    /* </nestedMenu> */

/* </navigationMenu> */

@ako درود
از z-index استفاده کنید ، شاید درست شد
باز کار من فرانت نیست ولی خب احتمالا کمک کننده باشه

بوت استرپ

z-3

سی اس اس

z-index:9999999999999999999;

سلام @arianseyed ممنون بابت پاسخگویی، از z-index هم استفاده کردم ولی مشکل همچنان پا بر جاست 🙁

@vahid1379 از z-index هم استفاده کردم ولی مشکل حل نشد ):

درود خوبی...
کد مشکلی نداره
این حالت شیشه ای هست که متن ها دیده میشه و به بکگراند رنگ دیگه بده....

واقعاً که 😑😑😑
@Raymond ممنون بابت پاسخگویی مشکل حل شد. مشکل از بگراند شیشه‌ای بود ❤️
تقریباً دو روز میشه درگیر این مشکلم. تو چنین شرایطی که مشکل همچین چیز ساده‌ای هستش به‌نظرم حل نشه عذاب کم‌تری داره 😅

@ako
عادت می کنید و زیاد سخت نگیر
این سبک زندگی برنامه نویسان است که هر روز خطا و مشکلات سر می کند.