Sera,
ho una slideshow che quando metto il browser a pieno schermo va a sovrapporsi al <div> che ha sopra, se il browser è a dimensione ridotta non succede.
codice HTML:
<div class="row2">
<div class="col2-2">
<div id="slideshow">
<div>
<img class="slimg" src="images/sanfrancesco.jpg">
<span class="cap">San Francesco</span>
</div>
<div>
<img class="slimg" src="images/sanvalentino.jpg">
<span class="cap">San Valentino</span>
</div>
<div>
<img class="slimg" src="images/gelasio.jpg">
<span class="cap">Papa Gelasio I</span>
</div>
<div>
<img class="slimg" src="images/luperco.jpg">
<span class="cap">Luperco</span>
</div>
<div>
<img class="slimg" src="images/sanbenedettonorcia.jpg">
<span class="cap">San Benedetto da Norcia</span>
</div>
<div>
<img class="slimg" src="images/santachiaraassisi.jpg">
<span class="cap">Santa Chiara d'Assisi</span>
</div>
<div>
<img class="slimg" src="images/santaritacascia.jpg">
<span class="cap">Santa Rita da Cascia</span>
</div>
<div>
<img class="slimg" src="images/santercolano.jpg">
<span class="cap">Sant'Ercolano</span>
</div>
</div>
<div id="slideshow2">
<div>
<img class="slimg" src="images/perugino.jpg">
<span class="cap">Pietro Vannucci detto il Perugino</span>
</div>
<div>
<img class="slimg" src="images/perugino2.jpg">
<span class="cap">Adorazione dei Magi (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/perugino3.jpg">
<span class="cap">Battesimo di Cristo (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/perugino4.jpg">
<span class="cap">Consegna delle Chiavi (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/perugino5.jpg">
<span class="cap">Sposalizio della Vergine (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio.jpg">
<span class="cap">Bernardino di Betto Betti detto il Pinturicchio</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio2.jpg">
<span class="cap">Interno della Libreria Piccolomini</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio3.jpg">
<span class="cap">Disputa di Gesù coi dottori (Cappella Baglioni)</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio4.jpg">
<span class="cap">Resurrezione di Cristo con papa Alessandro VI inginocchiato (Appartamento Borgia)</span>
</div>
<div>
<img class="slimg" src="images/galeazzoalessi.jpg">
<span class="cap">Galeazzo Alessi</span>
</div>
<div>
<img class="slimg" src="images/bellucci.jpg">
<span class="cap">Monica Bellucci</span>
</div>
</div>
</div>
</div>
codice:
#slideshow {
margin: 0;
position: relative;
margin-bottom: 10px;
width: 100%;
height: 501px;
padding: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
width: 100%;
}
#slideshow .slimg {
width: 100%;
height: 501px;
}
#slideshow .cap {
position: absolute;
width: 100%;
top: 451px;
left: 0;
margin: 0;
padding: 5px 0 15px 0;
background-color: rgba(242,242,242,.6);
color: #FFFFFF;
text-align: center;
}
#slideshow2 {
margin: 0;
position: relative;
width: 100%;
height: 501px;
padding: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
#slideshow2 > div {
position: absolute;
width: 100%;
}
#slideshow2 .slimg {
width: 100%;
height: 501px;
}
#slideshow2 .cap {
position: absolute;
width: 100%;
top: 451px;
left: 0;
margin: 0;
padding: 5px 0 15px 0;
background-color: rgba(242,242,242,.6);
color: #FFFFFF;
text-align: center;
}
.col2-2 {
float: right;
width: 47.5%;
padding: 0;
margin-top: -1011px;
margin-right: 30px;
}
.row2:after {
content: "";
display: table;
clear: both;
}