CSS/HTML DIV muss über den Bildschirm in Sollposition gehen

Question

ich ein div mit Farbe gefüllt müssen, die hinter den Flaschen wie diese über den Bildschirm geht:

Habe jetzt zu viele Male versucht. ..

Hier ist mein html:

.panel { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    display: block; 
 
} 
 

 
.OriginalCollection { 
 
    background: url(img/page_5_background.png); 
 
} 
 

 
.inner2 { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    overflow: hidden; 
 
} 
 

 
.centerwraper { 
 
    position: relative; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
} 
 

 
.centerdivcollections { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    max-width: 1080px; 
 
} 
 

 
.allbottleswrap { 
 
    display: flex; 
 
} 
 

 
.singlebottle { 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 1200px) { 
 
    .singlebottle { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.bottletextwraper { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.bottletext { 
 
    padding: 0px 5px 0px 0px; 
 
} 
 

 
.titlebottle { 
 
    width: 90%; 
 
    .stripeee { 
 
    background-color: #662d91; 
 
    width: 100vw; 
 
    height: 30px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin-top: -45px; 
 
    }

<section class="panel OriginalCollection" data-section-name="OriginalCollection"> 
 
    <div class="inner2"> 
 
    <div class="centerwraper"> 
 
     <div class="centerdivcollections"> 
 
     <div> 
 
      <img class="coltitle" src="img/original_header.png" /> 
 
     </div> 
 
     <div class="allbottleswrap"> 
 
      <div class="bottletextwraper"> 
 
      <div> 
 
       <img class="singlebottle" src="img/1Heisenberg.png" /> 
 
      </div> 
 
      <div> 
 
       <img class="titlebottle" src="Titles/Titles/Heisenberg.png" /> 
 
      </div> 
 
      <div class="bottletext"> 
 
       <p>A top secret recipe that can only be described as the daddy of all day vapes. A fruity undertone and a cool crystal after sensation that will leave you wondering what it is... and wanting more.</p> 
 
      </div> 
 
      </div> 
 
      <div class="bottletextwraper"> 
 
      <div> 
 
       <img class="singlebottle" src="img/2Pinkman.png" /> 
 
      </div> 
 
      <div> 
 
       <img class="titlebottle" src="Titles/Titles/Pinkman.png" /> 
 
      </div> 
 
      <div class="bottletext"> 
 
       <p>The real MVP of the fruity flavours. Perfect for those looking for a one of a kind taste sensation. A true mouth-watering fruit explosion that your taste buds have been waiting for.</p> 
 
      </div> 
 
      </div> 
 
      <div class="bottletextwraper"> 
 
      <div> 
 
       <img class="singlebottle" src="img/3BloodSukka.png" /> 
 
      </div> 
 
      <div> 
 
       <img class="titlebottle" src="Titles/Titles/BloodSukka.png" /> 
 
      </div> 
 
      <div class="bottletext"> 
 
       <p>Packed with one hell of a bite. This flavour is crammed with sweet red cherries blended perfectly with fresh picked forest fruits. The fruity taste is then entangled beautifully with sweet eucalyptus and aniseed.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="stripeee"> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Alles ist fast fertig, wie ich will, außer diesem Streifen ... Wenn Sie möchten, können Sie immer www.konceptxix.com gehen, um die tatsächliche Website zu sehen. Es ist wahrscheinlich eine einfache Lösung für jemanden, der es gut kennt. Sorry für Chaos in den Code, ich mache mein Bestes ...

UPDATE: Ich kann diese auf eine Position dahinter setzen, aber es muss reaktionsfähig sein, so ist es das gleiche auf Handy etc ...

Answer 1

Ich nehme an, Sie dies über die Seite den ganzen Weg zu gehen? Sie sollten ein Pseudo-Element anstelle eines Divs verwenden, da es nur eine Dekoration ist, und Sie können die Breite auf eine unglaublich breite Breite einstellen, um zu gewährleisten, dass sie die Seite füllt - Sie haben bereits einen Überlauf auf den Sektionen versteckt ist egal, wenn es zu weit wird. Ich benutzte 150vw und setze die Links auf -50vw, um zu garantieren, dass es immer ganz links auf dem Bildschirm ist und den ganzen Weg geht.

Von dort musste ich einen Weg finden, um den Container für die Bilder zu zielen, auf diese Weise konnte ich das Pseudo-Element konsistent positionieren, wie das Bild verkleinert wird, ohne sich Gedanken über die Überlappung des Textes. Also ziele ich auf das erste div der ersten Flasche, das ist immer das Bild, so dass die Verwendung von Bildern unterschiedlicher Größe keine seltsamen doppelten Teiler verursacht. Das Ergebnis sollte das sein, wonach Sie suchen!

.bottletextwraper div:first-of-type{ 
position: relative; 
} 
.bottletextwraper img{ 
position: relative; 
z-index: 1; 
} 
.bottletextwraper:first-child div:first-of-type:after{ 
content: ''; 
display: block; 
width: 150vw; 
position: absolute; 
bottom: 3%; 
left: -50vw; 
height: 15%; 
background: #662d91; 
} 

Answer 2

.bottletextwraper { 
    display: inline-block; 
    vertical-align: middle; 
    position: relative; 
} 
.bottletextwraper::after{ 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background-color: orange; 
} 

Versuchen Sie, dies hinzuzufügen.

Answer 3

Da die stripee außerhalb von allbottletexwrapper liegt, ist es schwieriger, die z-indexing richtig einzustellen. Wenn Sie es nach innen verschieben können, können Sie auf Z-Index-Hacks verzichten. Aber wie auch immer, hier ist das, was Sie tun können:

//set stripee to be relative and positioned (use your size units) 
.stripeee { 
position: relative; 
top: -190px; 
z-index: 1;/*mind this... a bit hacky but... */ 
} 

Und dann stylen die Flaschen:

.bottletextwraper { 
    z-index: 5; /* use whatever number you consider safe according to the rest of page*/ 
}