The elements have to be under each other because in my script on some action a element will be moved from the bottom of the page to the top. When this happens on for example the 3rd image, the 3rd image will slide to the top but its old position is now a white gap.

Sometimes I don't get it whether I have to use absolute, relative, fixed, static and so on.

HTML:

        <div id='wrapper'>
            <img id='img1' src='./images/image1.jpg' alt='img1'>
            <br />
            <img id='img2' src='./images/image2.jpg' alt='img2'>
            <br />
            <img id='img3' src='./images/image3.jpg' alt='img3'>
            <br />
            <img id='img4' src='./images/image4.jpg' alt='img4'>
        </div>

CSS:

            body{
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            #wrapper{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #img1{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top:0px;
            }
            #img2{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 100%
            }
            #img3{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 200%;
            }
            #img4{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 300%;
            }

And my JavaScript for letting a element disappear on a certain action.

else {

        curr++;

        $('#img'+curr).animate({
            top: '0px'
        }, 1200);



        setTimeout(
             function() {
                $('#img'+(curr-1)).css('display', 'none');
              }, 1200);

      }

The elements have to be under each other because in my script on some action a element will be moved from the bottom of the page to the top. When this happens on for example the 3rd image, the 3rd image will slide to the top but its old position is now a white gap.

Sometimes I don't get it whether I have to use absolute, relative, fixed, static and so on.

HTML:

        <div id='wrapper'>
            <img id='img1' src='./images/image1.jpg' alt='img1'>
            <br />
            <img id='img2' src='./images/image2.jpg' alt='img2'>
            <br />
            <img id='img3' src='./images/image3.jpg' alt='img3'>
            <br />
            <img id='img4' src='./images/image4.jpg' alt='img4'>
        </div>

CSS:

            body{
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            #wrapper{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #img1{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top:0px;
            }
            #img2{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 100%
            }
            #img3{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 200%;
            }
            #img4{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 300%;
            }

And my JavaScript for letting a element disappear on a certain action.

else {

        curr++;

        $('#img'+curr).animate({
            top: '0px'
        }, 1200);



        setTimeout(
             function() {
                $('#img'+(curr-1)).css('display', 'none');
              }, 1200);

      }

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 6, 2015 at 20:04 pnuts 59.6k1111 gold badges9191 silver badges141141 bronze badges asked Nov 4, 2015 at 8:52 SamSam 7533 silver badges1212 bronze badges 7

• Since you posted 90% of your code you could have added a fiddle along with it. – EugenSunic Commented Nov 4, 2015 at 8:59
• Please add a working example in jsfiddle or similar. – Justas Commented Nov 4, 2015 at 8:59
• Sorry i didnt think about that. But here is the jsfiddle jsfiddle/6bxoxs66 – Sam Commented Nov 4, 2015 at 9:09
• 1 A tip unrelated to your question: Do not repeat the same CSS over and over again. Instead, create a class containing the five lines all the images have in mon, and style the class instead of every single image. – Anders Commented Nov 4, 2015 at 9:10
• Also, since body and #wrapper have the same styles, you can just do body, #wrapper { ... } to avoid repeating the same thing twice. – Anders Commented Nov 4, 2015 at 9:11

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

    <div id='wrapper'>
        <img id='img1' src='./images/image1.jpg' alt='img1'>

        <img id='img2' src='./images/image2.jpg' alt='img2'>

        <img id='img3' src='./images/image3.jpg' alt='img3'>

        <img id='img4' src='./images/image4.jpg' alt='img4'>
    </div>

        #wrapper{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #wrapper img {
            display: block;
        }  

display: block; on <img> element; Now your img element will behave like a block element, no need to position it absolute or use <br/>, all images will go one after the other

If you want to stick to your positions and the top atributes then just switch to relative, otherwise go with the display:block; I suggest also to read this:

https://css-tricks./the-difference-between-id-and-class/

example:

   body{
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            #wrapper{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #img1{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: relative;
                top:0px;
            }
            #img2{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
               position: relative;
                top: 100%
            }
            #img3{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                 position: relative;
                top: 200%;
            }
            #img4{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: relative;
                top: 300%;
            }

try using

 display:block;

for this, also you can give

 witdh:100%; 

and set

 margion:0 auto;

also try below:

 http://www.w3schools./cssref/pr_class_display.asp