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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

345

HTML

Carousel Bootstrap 3. Изменение надписи при смене слайда

У меня есть код

312

HTML

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

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

318

HTML

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

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

272