Как выйти за ширину родительского блока при абсолютном позиционировании и растянуть этот блок до границ краёв окна браузера

454
31 января 2017, 20:26

Как вылезти за ширину родительского блока при абсолютном позиционировании. Нужно чтобы у псевдо элемента (его бекгроунд) расстянулся за пределы .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>
Answer 1

Если растянуть нужно не на какой-то контейнер, а на окно браузера, то можно применить 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>

Answer 2

В общем случае никак. Был неправ, в некоторых случаях можно.

Можно легко вылазить только на фиксированное расстояние, но растянуть до краёв окна браузера не получится.

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. С осторожностью - из-за того, что место на блок будет оставаться снизу и в случае с концом позиционированного контейнера будет приводит к пустоте внизу.

Answer 3

Да все работает, пример ниже.

.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 с вычислением. В редакторе здесь неправильно показывает, но на сайте тестовом все ОК.

READ ALSO
Плагин jQuery UI tabs, внешняя ссылка

Плагин jQuery UI tabs, внешняя ссылка

Почему не работает внешняя ссылка на другие сайты?

345
Как спарсить строки из html файла на php?

Как спарсить строки из html файла на php?

Всем доброй ночи Есть текстовый документtxt в котором с новой строки написаны фразы, и есть html документ, где с новой строки идет код + фразы...

318
Не работают media query в IE9

Не работают media query в IE9

Привет! Верстка mobile first, поэтому грузятся только мобильные стилиОтчего-то не работают media в 9ке, что сделано: 1

272