CSS responsive position absolue entre les éléments

J'aimerai obtenir de l'aide s'il vous plaît avec la construction d'un responsive design.

Le truc c'est que je ne sais pas comment faire pour placer les éléments comme l'absolu, mais de garder la même distance à partir du haut des proportions entre eux.

Voici un lien vers un exemple où vous pouvez redimensionner la largeur de la fenêtre et de voir que les deux éléments s'éloignent les unes des autres, au lieu de toujours conserver le même espace entre eux à partir du haut.
Donc ce que je cherche est en quelque sorte semblant de mise à l'échelle de l'ensemble de la chose, donc il n'en sera que plus petit/plus grand, mais l'air toujours le même.

Comment puis-je faire les éléments à monter et à rétrécir l'espace de haut lorsque la fenêtre de redimensionnement s'il vous plaît?

http://jsfiddle.net/QV6DR/

.container {
    width: 100%;
    height: 1000px;
    position: relative;
    background: #eee;
}

.container div {
    height: 0;
    position: absolute;
    background: #ccc;
}

.elm1 {
    width: 20%;
    padding-bottom: 20%;
    top: 20%;
    left: 5%;
}

.elm2 {
    width: 30%;
    padding-bottom: 30%;
    top: 40%;
    right: 10%;
}

CSS responsive position absolue entre les éléments

OriginalL'auteur Gil Goldshlager | 2013-11-08

  1. 2

    Parce que votre conteneur a une hauteur de 1000px et votre les éléments sont positionnés de 20% par rapport à la partie supérieure du conteneur(qui est toujours 200px), ils ne seraient pas en mesure de déplacer vers le haut lorsque la fenêtre du navigateur est redimensionnée.

    Si vous modifiez le conteneur des styles pour les éléments suivants:

    .container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #eee;
}

    Les éléments se décale vers le haut lorsque la fenêtre de votre navigateur est redimensionnée verticalement.

    Je crois que le seul moyen de les déplacer vers le haut à la verticale sans redimensionnement de la fenêtre verticalement, à l'aide de requêtes de média et de modification de la haut: 40%; styles sur vos éléments.

    Voici le violon sans les media queries.

    Je vous remercie très beaucoup pour la réponse, je pense que j'ai juste trouvé que je peux utiliser de la marge au lieu de haut/gauche pour positionner les éléments dans un réactif de façon que je suis à la recherche, n'est-ce pas? voici un nouvel exemple: jsfiddle.net/QV6DR/2

    OriginalL'auteur Mathias Rechtzigel