Problem z warstwami

[Marys]

Witam,
próbuje jedno zdjęci wyciągnąć (z-index) na przód, ale coś mi nie idzie, więc proszę o pomoc.

Plik html

Kod:

<div id="container">
        <div id="example">
            <div id="slides">
                <div class="slides_container">
                    <div class="slide">
                    <img id="obraz" src="images/doc_man.png" height="424" align="left"  />
                        <h1>Dokumentacja budowy</h1>
                        <p>Zajmujemy się kompletną doukmentacją budowy. Od załatwienia pozwolenia na budowę do odbioru budynku.</p>
                    </div>
                    <div class="slide">
                    <img src="images/doc.png" width="200" align="left"  />
                        <h1>Dosadf</h1>
                        <p>Zajmujemy się fds</p>
                    </div>
                    <div class="slide">
                        <h1>Fourth Slide</h1>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                        <p><a href="#6" class="link">Check out the sixth slide &rsaquo;</a></p>
                    </div>

Plik css

Kod:

/*
    Resets defualt browser settings
    reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
    Page Style
*/
body {
    font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
    letter-spacing:0;
    color:#434343;
    background:#efefef url(../img/background.png) repeat top center;
    padding:20px 0;
    position:relative;
    text-shadow:0 1px 0 rgba(255,255,255,.8);
    -webkit-font-smoothing: subpixel-antialiased;
}

#container {
    width:580px;
    padding:10px;
    margin:0 auto;
    position:relative;
    z-index:0;
}

#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}

#example {
    width:600px;
    height:350px;
    position:relative;
}

/*
    Slideshow style
*/

#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    If height not specified height will be set by the slide content
    Set to display none, prevents content flash
*/

.slides_container {
    width:570px;
    height:270px;
    overflow:hidden;
    position:relative;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    Offeset for the 20px of padding
    If height not specified height will be set by the slide content
    Set to display block
*/

#slides .slide {
    padding:20px;
    width:530px;
    height:230px;
    display:block;
}

/*
    Next/prev buttons
*/
#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:-39px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:585px;
}

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

/*
    Footer
*/

#footer {
    text-align:center;
    width:580px;
    margin-top:9px;
    padding:4.5px 0 18px;
    border-top:1px solid #dfdfdf;
}

#footer p {
    margin:4.5px 0;
    font-size:1.0em;
}

/*
    Type and anchors
*/

a:link,a:visited {
    color:#599100;
    text-decoration:none;
}

a:hover,a:active {
    color:#599100;
    text-decoration:underline;
}

h1 {
    font-size:2em;
}

p {
    font-size:1.3em;
}

#slides .link {
    display:block;
    margin-top:10px;
    font-weight:800;
}

Chodzi o to, żeby wyciągnąć ten obrazek zawarty w .slide

[tolo]

robił bym to na identyfikatorach a nie na klasach i z index powinien zadziałać