Positionner relativement un élément sans qu'il prenne de la place dans le flux de documents

Question

Comment puis-je positionner relativement un élément sans qu'il ne prenne de la place dans le flux de documents?

Answer 1

Ce que vous essayez de faire ressemble à du positionnement absolu. D'autre part, vous pouvez toutefois créer un élément pseudo-relatif en créant un élément de largeur nulle, de hauteur nulle et relativement positionné, essentiellement dans le seul but de créer un point de référence pour la position et un élément en position absolue. à l'intérieur de cela:

 <div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>
 

Answer 2

Ajoutez une marge égale aux pixels que vous avez déplacés:

Exemple

 .box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
 

Answer 3

En lisant un peu, il semble que vous pouvez position absolue d'un élément aussi longtemps que le parent de l'élément est en position relative. Cela signifie que si vous avez le CSS:

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

Ensuite, l'enfant de l'élément à ne pas occuper tout l'espace dans le flux de documents. Vous pouvez alors le placer à l'aide de l'un de la "gauche", "en bas", etc, propriétés. Le positionnement relatif sur le parent ne devrait pas nuire, car il sera positionné à sa position d'origine par défaut si vous ne spécifiez pas de "gauche", "en bas", etc.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/