Hei,
Kun käytän position: absolute, niin divini siirtyy sivun loppuun. Esimerkiksi:
HTML:
<div id="header">Moi!</div> <div id="absoluuttinen">Hello!</div> <div id="sisalto">Hallo!</div>
CSS:
#header {
border-bottom: 1px solid black;
}
#absoluuttinen {
position: absolute;
}Niin se näyttää näin:
Moi! Hallo! Hello!
Vaikka pitäisi olla näin...
Moi! Hello! Hallo!
Kysymyksessä on DIV-slideshow, ja position absolutea tai fixediä tarvitaan siihen, että divit menisivät päällekkäin.
Koko koodi sivuillani:
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>SIVU: Etusivu</title>
<meta name="viewport" content="width=device-width">
<meta name="author" content="Author">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('.slideshow div').hide();
$('.slideshow div:first-child').show();
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
3000);
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
#header {
border-bottom: 1px solid black;
}
#footer {
border-top: 1px solid black;
}
#slide1 {
width: 100%;
height: 100px;
background-image: url(img/apple.jpg);
background-repeat: no-repeat;
background-size: 200px;
background-position: center center;
}
.slideshow div {
width: 100%;
min-height: 200px;
padding: 50px;
position: absolute;
}
</style>
</head>
<body>
<html>
<div id="header">Headeri</div>
<div class="slideshow">
<div id="first_child">
Heippa!
</div>
<div id="second_slide">
Hello
</div>
<div id="third_slide">
Hallo!
</div>
</div>
<div id="ala">© Nimi (sivu.com), sivu.com</div>
</html>
</body>Laittamalla taustavärin ensin .slideshow:lle ja sitten .slideshow div:lle näet, mitä tapahtuu: .slideshow:lla ei ole korkeutta.
.slideshow {
height: 200px;
}http://codepen.io/Merri/pen/chDvy
Elementit on myös mahdollista asettaa päällekkäin ilman absolutea sillä tavalla, että kunkin elementin korkeus otetaan huomioon ja siten vaikuttaa isäntäelementtiin. Taikasana on negatiivinen marginaali.
Kiitos paljon merri! Aina nää on niin pienestä kiinni...
Aihe on jo aika vanha, joten et voi enää vastata siihen.