Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: CSS: Position absolute

joah [29.12.2013 17:15:36]

#

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">&copy; Nimi (sivu.com), sivu.com</div>
</html>
</body>

Merri [29.12.2013 23:38:08]

#

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.

joah [30.12.2013 10:16:09]

#

Kiitos paljon merri! Aina nää on niin pienestä kiinni...

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta