Position Absolute.

[SimonIoa]

Hello i have created something in CSS but the position changes according to the resolution of the screen. Here is the code? I want them to remain in one place regardless the resolution

here is the code

#poster {
    width:25%;
    height:25%;
    position:absolute;
    z-index:0;
}
    #poster img {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        height:70px; width:70px;
        border:#b19b00 solid thin
    }
    #poster a:nth-child(1) {

        position:relative;
        bottom: -75%; left: 35%;
    }
    #poster a:nth-child(2) {

        position:relative;
        bottom: -15%; right:-6%;
    }
    #poster a:nth-child(3) {

        position:relative;
        bottom: 18%; left: 10%;
    }
    #poster a:nth-child(4) {

        position:relative;
        top: 10%; right: -17%;
    }
    #poster a:nth-child(5) {

        position:relative;
        top: 5%; right: -77%;
    }
    #poster a:nth-child(6) {

        position:relative;
        top: -20%; right: -28%;
        height:120px;
        width:120px

    }

[lps]

If you wish all elements to be in one place regardless the resolution, then don't bother to use percentage to style your page, simply use fixed value.

[Lau_1]

using @media query method, for example:

@media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {

    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    }

[SimonIoa]

I did it in pixels but still the position changes according to screen resolution

#poster1 {
    width:25%;
    height:25%;
    position:absolute;
    z-index:0;
}
    #poster1 img {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        height:80px; width:80px;
        border:#b19b00 solid thin
    }
    #poster1 a:nth-child(1) {

        position:relative;
        bottom: -10px; left: 20px;
    }
    #poster1 a:nth-child(2) {

        position:relative;
        bottom: 25px; right:-90px;
    }
    #poster1 a:nth-child(3) {

        position:relative;
        top: 100px; left: 100px;
    }
    #poster1 a:nth-child(4) {

        position:relative;
        top: 100px; left: 15px;
    }
    #poster1 a:nth-child(5) {

        position:relative;
        top: 150px; left: 80px;
    }
    #poster1 a:nth-child(6) {

        position:relative;
        top: -120px; right: -78px;
        height:180px;
        width:180px

    }

#poster {
    width:25%;
    height:25%;
    position:absolute;
    z-index:0;
}
    #poster img {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        height:70px; width:70px;
        border:#b19b00 solid thin
    }
    #poster a:nth-child(1) {

        position:relative;
        bottom: 0px; left: 20px;
    }
    #poster a:nth-child(2) {

        position:relative;
        bottom: 45px; right:-50px;
    }
    #poster a:nth-child(3) {

        position:relative;
        top: 30px; left: 50px;
    }
    #poster a:nth-child(4) {

        position:relative;
        top: 50px; left: 30px;
    }
    #poster a:nth-child(5) {

        position:relative;
        top: 65px; left: 80px;
    }
    #poster a:nth-child(6) {

        position:relative;
        top: -120px; right: -78px;
        height:120px;
        width:120px

    }

[SimonIoa]

@Ips by fixed you mean in pixels? @Lau 1 can you send me an example? Because i am confused. So what do i do, i put the code i want in the brackets?

@media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

    my code here?
    }

[Lau_1]

@media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {
    //put your css design here. To test the result, minimize or maximize your screen
    }

[SimonIoa]

but what about if the screen is 1366px wide or 1024 or 800 pixels? I want the images to stay in one place regardless the resolution the users screen has.