Problema posizionamento elementi div

[mugproject]

Buonasera a tutti, scusatemi se è la sezione sbagliata ma sono nuovo alle sezioni del vostro forum.
veniamo al dunque: ho un problema di visualizzazione di div all'interno della mia pagina.
In pratica il footer va a sovrapporsi al banner, come se il banner non esistesse o non fosse chiuso.
ho provato a controllare l'html ma sembra tutto in ordine, cosi come il css.

questo è il link al sito: http://mugproject.altervista.org/index.html

questo è l'html:

<div class="contenitore clearfix">
    
    <div class="subarts clearfix">   
		<div class="subart">
			<img class="subart_image"src="img1.jpg" alt="Nature" />
			<div class="subart_copy">
				<h3>Title Card</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
			</div>
		</div> <!-- chiusura div subart -->
        
		<div class="subart">
			<img class="subart_image"src="img2.jpg" alt="Nature" />
			<div class="subart_copy">
				<h3>Title Card</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
			</div>
		</div><!-- chiusura div subart -->
        
		<div class="subart">
			<img class="subart_image"src="img2.jpg" alt="Nature" />
			<div class="subart_copy">
				<h3>Title Card</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
			</div>
		</div><!-- chiusura div subart -->
    </div> <!-- chiusura div subarts -->
    
        
    <div class="banner clearfix">
		<div class="subbnr">
			<img class="subbnr_img" src="img1.jpg" alt="Nature" />
			<div class="subbnr_copy">
				<h3>Title Card</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
			</div>
		</div>
        
	</div>  <!-- chiusura banner -->
      

    <div class="footer clearfix">
	   <p>Copyright - bla bla bla.net</p>
    </div>
    
</div>   <!-- chiusura div contenitore  --> 

mentre questo il css:

/* //////////////////////////////////
Sub Articoli
/////////////////////////////////// */

.subarts{width:80%; height:20%;margin: 0 auto; border:3px solid violet; top:5%; position:relative;}
.subart{width: 30%; margin:0 1.5%; background: #fff;float:left;}
.subart_image{width:100%; height: auto;}
.subart_copy{padding:5px 20px;}
.subart_copy h3{margin-bottom:0}

/* ////////////////////////////////////
Banner
/////////////////////////////// */

.banner{
    width:80%; height:20%;margin: 0 auto; border:3px solid aqua; top:10%; position:relative;
}
.subbnr{
    width: 100%; margin:0 auto; background: #fff; float:left;
}
.subbnr_img{
    width:100%; height: 100%;
}
.subbnr_copy{
    padding:5px 20px;
}
.subbnr_copy h3, .subbnr_copy p{
    text-align:center;
}

/* //////////////////////////////////////
Footer
//////////////////////////////////////// */

.footer{width:100%; height:2%;background: #333; padding:30px;color:#fff; /* margin-top: 40px; */ position:relative;}

.contenitore{
    width:100%;
    border:10px yellow solid; 
    height:200%;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: "";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

come posso risolvere? ho provato a mettere position relative a ogni macrosezione ma non so se è sufficiente. ho provato a togliere e mettere il clearfix ma senza riuscire a vedere cambi. vi ringrazio in anticipo, confido in un vostro aiuto perchè sto impazzendo ;)
Buon proseguimento!!

[alemoppo]

Attualmente vedo che stai modificando l'HTML (è tutto commentato). Da una prova mi è parso di riuscire a mostrare il "banner" impostando una z-index molto alta.

In ogni caso, ti consiglierei sfruttare le nuove tecniche di CSS, come i flexbox.

Ciao!

[GraphOGLRisorse]

Salve,
Provi con questo esempio, le dovrebbe andar bene.

Il codice css l'ho incluso nel file. Può scarcarlo e modificarlo tranquillamente come preferisce. Il codice incude anche la parte per il responsive.

Cordiali saluti.