Как вылезти за ширину родительского блока при абсолютном позиционировании. Нужно чтобы у псевдо элемента (его бекгроунд) расстянулся за пределы .container Есть такая разметка
<div class="container">
<div class="parent">
<div class="element">
text
</div>
</div>
<div>
<style>
.container{
width:960px
}
.element{
position:relative;
}
.element:after{
content:"";
position:absolute;
bottom:0;
background:url(picture.png);
width:250px;
height:25px;
}
</style>
Если растянуть нужно не на какой-то контейнер, а на окно браузера, то можно применить vw
:
section {
width: 200px;
outline: 1px dotted red;
height: 100px;
position: relative;
margin: auto;
}
section:after {
content: "";
position: absolute;
left: calc((100% - 100vw) / 2);
bottom: 0;
height: 50px;
width: 100vw;
background: silver;
}
<section></section>
В общем случае никак. Был неправ, в некоторых случаях можно.
Можно легко вылазить только на фиксированное расстояние, но растянуть до краёв окна браузера не получится.
section {
width: 200px;
outline: 1px dotted red;
height: 100px;
position: relative;
margin: auto;
}
section:after {
content: "";
position: absolute;
left: -50px;
right: -50px;
bottom: 0;
height: 50px;
background: silver;
}
<section></section>
Чтобы растянуть до краёв, можно использовать дополнительный контейнер:
section {
width: 200px;
outline: 1px dotted red;
height: 100px;
/* no position */
margin: auto;
}
section:after {
content: "";
position: absolute;
left: 0;
right: 0;
margin-top: -50px; /* same as height */
height: 50px;
background: silver;
opacity: 50%;
}
div {
position: relative;
width: 100%;
height: 100%;
}
<section>
<div></div>
</section>
Если высота динамическая, то в примере выше можно (с осторожностью) вместо margin-top
использовать transform translate. С осторожностью - из-за того, что место на блок будет оставаться снизу и в случае с концом позиционированного контейнера будет приводит к пустоте внизу.
Да все работает, пример ниже.
.container {
margin: auto;
width: 400px;
}
.element {
position: relative;
background: yellow;
text-align: center;
}
.element:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
transform: translateX(-50% + 200px);
border: 1px solid red;
width: 500px;
height: 50px;
}
<div class="container">
<div class="parent">
<div class="element">
text
</div>
</div>
<div>
Поправил код. Ширина - 100vw, потом transform с вычислением. В редакторе здесь неправильно показывает, но на сайте тестовом все ОК.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Всем доброй ночи Есть текстовый документtxt в котором с новой строки написаны фразы, и есть html документ, где с новой строки идет код + фразы...
Привет! Верстка mobile first, поэтому грузятся только мобильные стилиОтчего-то не работают media в 9ке, что сделано: 1