How to get out of the width of the parent unit with absolute positioning? It is necessary for the pseudo-element (its background) to stretch beyond the limits of .container .

 .container { width: 960px } .element { position: relative; } .element:after { content: ""; position: absolute; bottom: 0; background: url(picture.png); width: 250px; height: 25px; } 
 <div class="container"> <div class="parent"> <div class="element"> text </div> </div> </div>

  • And can you make your code run and explain what the problem is to make an absolutely positionable element just larger than the container (for example, due to the width property)? - Vadim Ovchinnikov

3 answers 3

If you need to stretch not on a container, but on a browser window, you can use 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>

  • what you need, and what to do with 10 versions? I'm about vw - J.Doe
  • @ J.Doe, use a variant with more than a container from the next answer :) - Qwertiy ♦
  • he did not fit, alas ( - J.Doe
  • @ J.Doe, although stop. Caniuse says that IE10 supports vw . - Qwertiy ♦

In general, no way. Was wrong, in some cases possible.

You can easily climb out only for a fixed distance, but stretch to the edges of the browser window will not work.

 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>

To stretch to the brim, you can use an additional container:

 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>

If the height is dynamic, then in the example above you can (with caution) use transform translate instead of margin-top . With care - due to the fact that the space on the block will remain at the bottom and in the case of the end of the positioned container will lead to a void below.

    Yes, everything works, an example below.

     .container { margin: auto; width: 400px; } .element { position: relative; background: yellow; text-align: center; } .element:after { content: ""; position: absolute; top: 0; left: 0; width: 100vw; transform: translateX(calc(-50vw + 200px)); border: 1px solid red; height: 18px; } 
     <div class="container"> <div class="parent"> <div class="element"> text </div> </div> <div>

    Corrected the code. Width - 100vw, then transform with the calculation. In the snippet here and on the test site everything is OK.

    • I need avter to stretch to 100% - J.Doe
    • It is possible and so corrected the answer. Stretched to the width of the browser window. - KAGG Design