Position absolute?

Question

[Rem36]

День добрый, уважаемые знатоки. Есть первый экран, навигация в верху, все по стандарту. Хочу у меню сделать полупрозрачную подложку высотой 50 px. Но меню в контейнере 1200px. Подложка при width 100% на 1200px. Мне нужно подложку вынести за пределы контейнера а меню дать position absolute что бы наложить меню на подложку?

Comments

[Ankhena]

Вы можете:
1. Обернуть контейнер и этой обертке задать полупрозрачный фон.
2. Сотворить для контейнера абсолютно-позиционированный псевдоэлемент с шириной 100vw. Только не забудьте overflow-x для ближайшего родителя с шириной на всё окно.

Примеры гуглятся по запросу типа "контент по центру, фон по ширине".

Answer 1

[Даниил]

Тебе стоит дать конкретный пример, плохо понятно, о чём идёт речь.

Comments

[Rem36]

спс

Answer 2

[Хачатур Хачатрян]

Пожалуйста, скинь скриншот страницы и код меню, так понятливее будет

Comments

[Rem36]

спс

Answer 3

[Иван Медведев]

Контейнеру с меню дай позишин: релетив. Подложку вешай через псевдоэлемент с абсолютным позиционированием, шириной 100% и нужной высотой. Обязательно задай z-index. А пунктам меню тоже позишин релетив и индек выше, чем у подложки

Или так:

Comments

[Ankhena]

При ширине 100% псевдо не растянется на всю ширину окна. Нужно 100vw и overflow

[Иван Медведев]

Ankhena, а я немного не понял задание. Да, согласен, ширину задать стоит через 100vw

[Rem36]

добавил див перед нав и дал ему поситион абсолуте, а хедеру поситион релативе. этому диву дал ширина 100% и высоту 50px наву з-индекс больше.

[Иван Медведев]

Rem36, ничего не понятно.

Во первых, вы должны знать как работает позишин релетив и абсолют. Относительно чего позиционируется блок.

Используйте мой код или покажите свой, чтобы можно было дать какие-то рекомендации

[Rem36]

<header class="header">
        <div class="header__fon-nav"></div>
        <div class="container">
            <div class="header__wrap">
            <div class="header__top-nav">
                <nav class="top__nav">
                    <ul class="top__nav-list">
                        <a href="#" class="active"><li class="list__item act">Главная</li></a>
                        <a href="#"><li class="list__item">Внутренние номера IP- телефонии</li></a>
                        <a href="#"><li class="list__item">Документы по ГО и ЧС</li></a>
                        <a href="#"><li class="list__item">Научно-методические материалы</li></a>
                        <a href="#"><li class="list__item">Публикации в СМИ</li></a>
                        <a href="#"><li class="list__item">Информационные стенды</li></a>
                    </ul>
                </nav>
            </div>

.header__block-dop-nav-inner-fon{
    position: absolute;
    width: 100%;
    height: 350px;
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 370px;
    z-index: -1;
}
.header{
    background-image: url('img/header-bg.jpg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    position: relative;
    z-index: 5;
}


.header__fon-nav{
    background-color: rgba(0, 0, 0, 0.3);
    height: 60px;
    width: 100%;
    position: absolute;
    z-index: 10;
}


.top__nav{
    z-index: 50;
    position: relative;
}