aiuto con html e css!?

Question

non riesco a capire perchè l'elemento <p> non si trova al di sotto dell'immagine  ma viene coperto ( credo sia dovuto a causa del position absolute ?). Grazie in anticipo.

HTML:

 <div class="hero" >

        <div class="hero_content" >

            <p>If you can...</p>

            <h1>Katch Me!</h1>

            <a href="" class="button" >Discover More</a>

        </div>

    </div>

    <div class="storia">

        <div class="testo" >

        <p>cdscniudncndsicdcidjcidjc <br>cdscniudncndsicdcidjcidjc <br>cdscniudncndsicdcidjcidjc <br>cdscniudncndsicdcidjcidjc...

</div>

    </div>

CSS:.hero{  position: absolute; z-index: 0;  top: 0;  left: 0;  height: 100%;  display: flex; width: 100%; align-items: center;  background-image: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,0.9)),   url(./img/the-annunciation-1125149_1920.jpg);  background-size: cover;  background-repeat: no-repeat;  background-position: center;}.hero_content{  width: 100%;  max-width:1350px ;  margin: 0 auto;  padding-left: 20px;  color: white;}.storia{  display: flex;  border: 1px solid red;  padding: 100px;  position: absolute; z-index: -10;}

Answer 1

Un qualcosa di questo tipo, che te ne pare? https://codepen.io/Baffol2asta/pen/LYRYGWG

Se ti piace, questa soluzione usa Bootstrap 4, quindi dovresti aggiungerlo agli import. È già automaticamente responsive, si adatta a tutte le risoluzioni, anche da cellulare.

Answer 2

Vedi se così ti può andar meglio. Nell'html aggiungi un immagine al posto del background:

 <div class="hero" >      <img id="hero_background" src="the-annunciation-1125149_1920.jpg" width="1000" height="453" alt=""/>      <div class="hero_content" >    <p>If you can...</p>            <h1>Katch Me!</h1>            <a href="" class="button" >Discover More</a>        </div>    </div>    <div class="storia">        <div class="testo" >        <p>cdscniudncndsicdcidjcidjc <br>cdscniudncndsicdcidjcidjc <br>cdscniudncndsicdcidjcidjc <br>cdscniudncndsicdcidjcidjc...</p></div>    </div>

 <style>    *{box-sizing: border-box;}                       .hero{ width: 100%;overflow: hidden;border: thin solid #00ff40;position: relative; }                .hero_content{ width: 100%;max-width: 1350px;padding-left: 20px;color: white;position: absolute;    height: 100%;    left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);     border: thin solid white;        }                  .storia{  border: 1px solid red;  padding: 100px; }        #hero_background{float: left;width: 100%;height: auto;top: 0;left: 0;z-index: -1;}                   </style>