0

Есть код

        let cataloglistbutton=document.querySelector('.catalogbutton');
        cataloglistbutton.onclick = function () {
            console.log('Before');
            if (document.getElementById('dropdownwindow').style.display=="none")
            {
                document.getElementById('dropdownwindow').style.position="absolute";
                document.getElementById('dropdownwindow').style.marginLeft="0";
                document.getElementById('dropdownwindow').style.marginTop="0";
                document.getElementById('dropdownwindow').style.display="block";
                console.log(document.getElementById('dropdownwindow').style.display);
                document.getElementById('dropdownwindow').style.marginRight="40%";
                document.getElementById('dropdownwindow').style.width="60%";
                document.getElementById('dropdownwindow').style.backgroundColor="#ffffff";
                /*document.getElementById('dropdownwindow').style.position="absolute";*/
                /*document.getElementById('dropdownwindow').style.marginBottom="0px";
                document.getElementById('dropdownwindow').style.paddingBottom="0px";*/              
            } else {
                document.getElementById('dropdownwindow').style.display="none";
                document.getElementById('dropdownwindow').style.position="absolute";
                document.getElementById('dropdownwindow').style.marginLeft="0";
                document.getElementById('dropdownwindow').style.marginTop="0";
                console.log(document.getElementById('dropdownwindow').style.display);
                document.getElementById('dropdownwindow').style.marginRight="100%";
                document.getElementById('dropdownwindow').style.width="0";
                document.getElementById('dropdownwindow').style.backgroundColor="#ffffff";
                /*document.getElementById('dropdownwindow').style.marginBottom="0px";               
                document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
            };          
                
            console.log('After');
        
        }
#pageHeader {
    grid-area: header;
    width: 100%;
    /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

#pageHeader .headerinsides {
        padding-left: 65px;
        padding-right: 65px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        font: 18px "PT Sans",sans-serif;
        /*align-items: center;*/
}

.icon {
        align-self: center;
        /*padding-left: 74px;*/
        /*padding-right: 74px;*/
}

#pageHeader .labelforicon {
        padding-left: 10px;
        /*padding-right: auto;*/
        /*width: 1200px;*/
        align-self: center;
        /*flex: 34px;*/
        /*border-bottom: 2.5px dotted black;*/
        font: 18px "PT Sans",sans-serif;
        /*white-space: pre;*/
}

.flexcitylink {
        /*margin-left: 74px;*/
        display: flex;
        flex: 60px;
        /*font: 18px, PT Sans,sans-serif;*/
        width: 100%;
}

.flexcitylinkwrapper {
    display: flex;
}

/*
.headerparamswrapper {
    display: flex;
    margin-left: auto;
}
*/

.intermediatespace {
        margin-left: auto;
        flex: 30%;
}

.telephonenumber {
        margin-left: auto;
        flex: 30%;
}

.addressandworkschedule {
        margin-left: auto;
        flex: 20%;
}

.payment {
        margin-left: auto;
        flex: 10%;
}

.delivery {
        margin-left: auto;
        flex: 10%;
}

#pageHeader .headerinsidessecondrow {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        height: 57px;
        display: flex;
        /*justify-content: space-between;*/
        align-items: center;
        font: 16px "PT Sans",sans-serif;
}

.catalogbutton{
    margin-left: auto;
    margin-right: auto; 
    flex: 22.5%;
    height: 41px;
}

.betweenspace {
    flex: 7.5%;
}

.inputsearch {
    margin-left: auto;
    flex: 80%;
    height: 41px;
    /*border-bottom-width: 0px;*/
    /*height: 32px;*/
}

.searchbutton {
    margin-left: auto;
    flex: 20%;
    height: 41px;
}

.findinfo {
    flex: 40%;
    display: flex;
    justify-content: stretch;
}

.secondbetweenspace {
    flex: 10%;
}

.loginandsignup {
    margin-left: auto;
    /*margin-right: 0px;*/
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-start;
    align-self: center;
}

.basket {
    margin-left: auto;
    /*margin-right: 0px;*/
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-start;
    align-self: center;
}

/*#wholeblock {
    display: flex;
}*/

#dropdownwindow {
    display: none;
    margin-left: 0;
    margin-right: 100%;
    height: 100vh;
}
    
#fullblock {
    height: 100vh;
    /*position: static;*/
}
    
#pageFooter {
    grid-area: footer;
    width: 100%;
}
<div id="fullblock">
<div id="dropdownwindow">
</div>
<header id="pageHeader">
<div class="headerinsides">
        <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
                <span class="labelforicon">
                 Краснодар
                </span>
        </a>
        </span>
                <span class="intermediatespace">
                </span>
                <span class="telephonenumber">
                8 (800) 600 3900 (круглосуточно)
                </span>
                <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
                <span class="payment">
                    Оплата
                </span>
                <span class="delivery">
                    Доставка
                </span>     
</div>
<div class="headerinsidessecondrow">
<button class="catalogbutton">Каталог товаров</button>

<span class="betweenspace">
</span>

<span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
        <button class="searchbutton">Найти</button>
</span>

<span class="secondbetweenspace">
</span>

<span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
    <span class="loginsignuptext">
        Вход и регистрация
    </span>
</span>

<span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
    <span class="loginsignuptext">
        Корзина
    </span>
</span>
</div>
</header>

В результате при щелчке на кнопке .catalogbutton возникает блок .dropdownwindow, а блок .flexcitylinkwrapper не перекрывается блоком .dropdownwindow несмотря на

document.getElementById('dropdownwindow').style.position="absolute"; 

Ссылка .flexcitylinkwrapper не должна отображаться и должна находиться под блоком .dropdownwindow согласно http://htmlbook.ru/css/position

введите сюда описание изображения

введите сюда описание изображения

Как добиться перекрытия ссылки с городом и пунктов левого бокового меню Техника для кухни, Бытовая техника для дома и т. д. выпадающим окном?

1 ответ 1

0

Попробуйте так

document.getElementById('dropdownwindow').style.zIndex =99999;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.