Absolu et fixe positionnement de l'ensemble

Comme vous pouvez le voir dans cette page: http://pitchfork.com/ , il y a quelques éléments audio sur le côté droit. J'ai inspecté et ils semblent avoir un positionnement absolu. Mais si vous faites défiler vers le bas, vous verrez qu'elles sont fixes.

Comment pouvez obtenir ce comportement? Peut être un élément Absolu et Fixe positionné?

Ils cherchent à être en position absolue à l'intérieur d'un conteneur fixe.
Fixe. Voici une bonne explication sur les différentes positionnement - css-tricks.com/...

OriginalL'auteur Manolo | 2014-01-17

6

Créer un frais fixe à défilement latéral avec pas de javascript et quelques lignes de css.

Verticale fixe div avec flexible de positionnement horizontal.

Fixe div en coulisse ci-dessous semble être positionné par rapport au conteneur, mais c'est juste un illusion.

FIXE DIVS SONT TOUJOURS POSITIONNÉES L'UNE PAR RAPPORT À L'ÉCRAN.

ABSOLUE DIVS APPARAISSENT TOUJOURS PAR RAPPORT À LEUR PLUS PROCHE "POSITION:RELATIVE" CONTAINER.

HTML
```
<div class="Wrap">WRAP</div>
<div class="Fixed">FIXED</div>
```
CSS
```
.Wrap{
    background:#ccc;
    width:600px;
    height:300px;
    margin:0 auto;
}
.Fixed{
    position:fixed;
    top:20px;
    right:50%; /* this is the trick to make the fixed div appear absolute */
    background:#333;
    height:100px;
    width:50px;
    margin-right:-360px; /*Must be half of container width plus desired positioning*/
}
```
L'illusion d'une div qui s'affiche à la fois absolu et fixe en même temps est obtenue en utilisant une marge négative et une largeur fixe conteneur.

http://jsfiddle.net/9HQ4b/2/

Petite version du site pour les plus petits de la largeur des écrans.

http://jsfiddle.net/9HQ4b/3/

Comme vous pouvez le voir ici: jsfiddle.net/9HQ4b, il ne fonctionne pas correctement. La juste valeur est le respect de l'ensemble de la page...
Je pense que c'est le contraire. Un parent de la couche à l'intérieur d'un fixe de la couche. Est-il juste?
Après avoir regardé votre violon je vois le malentendu. Position fixe est toujours par rapport à l'écran. Vous avez besoin de la position absolue de la position par rapport à un autre élément
J'ai enfin trouvé la réponse. J'ai fait comme vous avez dit, mais de donner à margin la règle au lieu de top et right à l'élément fixe. De cette manière, il est par rapport à la couche de parent.
Dans le chemin que vous avez des commentaires, la couche ne sera pas à la verticale fixe.

OriginalL'auteur DreamTeK
3

C'est le seul moyen que j'ai trouvé: comme @DreamTek dit:
```
<div id="relative-layer">
    <div id="fixed-layer">
    </div>
</div>
```
et les styles de fichier:
```
#relative-layer {
    position:relative;
}

#fixed-layer {
    position: fixed;
    margin-top: 10px;
    margin-left: 10px;
}
```
parce que l'utilisation de top et right règles positions de la couche par rapport à la fenêtre, mais si vous utilisez margin-top et margin-left il est positionné par rapport à la couche de parent.

JSFIDDLE: http://jsfiddle.net/9HQ4b/1/

Veuillez voir mon violon ci-dessus, j'ai recréé l'audio de l'élément tel qu'il apparaît sur votre site web lié. La div défile avec la page mais toujours rester à côté de l'emballage. Espérons que cette aide.

OriginalL'auteur Manolo
2

Bien, l'inspecter l'élément EST absolue position, mais est placé à l'intérieur d'une enveloppe (dans un autre élément parent) - #joueur-modal, qui est fixe placé!

La position absolue est utilisée à l'intérieur de l'fixe positionné parent, de sorte que le .de la palette de l'élément à seulement quelques pixels en dehors de la zone de contenu (même espacement dans chaque résolution!). De cette façon, le flottant est fixé à la zone de contenu, au lieu de dépendre de la résolution (à l'aide de correction du positionnement + à l'aide de la "right: 20px;").

J'ai juste oublié de mentionner qu'il est possible, parce que le site a une largeur fixe et ne répondent pas de mise en page, de s'ajuster à chaque résolution. Si vous prévoyez d'utiliser cet effet sur le site avec une largeur fixe - cela va fonctionner, sinon vous pourriez avoir besoin d'une autre solution.

J'espère que j'ai expliqué bien! 🙂

Salut Manolo, je pense que vous êtes un développeur et que vous voulez apprendre comment faire vous-même... C'est la raison pour laquelle je n'ai pas donné de vous tout code jusqu'à présent. Laissez-moi savoir si vous avez besoin d'un code et/ou des explications détaillées.

OriginalL'auteur Minister

Vous pouvez également utiliser calc() pour atteindre cet objectif. (pris en charge dans IE9+):

.fixed {
    position: fixed;
    right: calc(50% - 360px); 
    /* Replace 360px with half of container width plus desired positioning */
}

ou si vous voulez que votre fixe div sur la gauche, par exemple:

.fixed {
    position: fixed;
    left: calc(50% - 360px); 
    /* Replace 360px with half of container width plus desired positioning */
}

OriginalL'auteur Jeremy Knight

Vous devez vous connecter pour publier un commentaire.