Position fixed browser resizing

Hi I have a couple of images on my website that ara place in a container div with the position set to relative.I placed each image using position absolute and after that I wanted to make the image folow the scrool.That is when I hit a problem.When I resize the browser the images dont stay in the normal flow of the content.Any suggestions on what should I do?

Here is the code for one of the images:

img[alt=ship]{
    border:15px solid black;
    position:absolute;
    left:400px;
    bottom:-50px;
    position:fixed;
    z-index:2;

    -moz-border-radius:35px;
    -webkit-border-radius:35px;
    -o-border-radius:35px;
    border-radius:35px;

    -moz-transform:rotate(7deg);
    -webkit-transform:rotate(7deg);
    -o-transform:rotate(7deg);
    -ms-transform:rotate(7deg);
    transform:rotate(7deg);

}

And here is my markup:

<div id="container">



   <div id="content">

       <div id="content_1">
            <a href="#"><img src="img/octopus.png"/  alt="octopus"></a>
            <a href="#"><img src="img/snake3.png" alt="snake1" /></a>
            <a href="#"><img src="img/snake2.png" alt="snake2" /></a>
            <a href="#"><img src="img/fish.png" alt="fish" /></a>
            <a href="#"><img src="img/Titanic2.jpg"  alt ="ship" /></a>
            <a href="#"><img src="img/sharks.jpg"  alt ="sharks" /></a>
            <a href="#"><img src="im开发者_JAVA技巧g/shark.jpg" alt="shark"/></a>
            <a href="#"><img src="img/ship1.jpg" alt="ship1" /></a>
            <a href="#"><img src="img/submarine.jpg" alt="submarine" /></a>

            <nav></nav>
            <section></section>
       </div>


 </div>

Check out my homepage. The little dock on top is probably what you are looking for. For this, the div should have position:fixed.