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

189

Comment puis-je positionner un élément de manière relative sans qu'il prenne de la place dans le flux de documents?

Web_Designer
la source
2
Doit-il être positionné de manière relative? Les éléments parfaitement positionnés sont supprimés du flux de documents.
Jason Gennaro

Réponses:

285

Ce que vous essayez de faire ressemble à un positionnement absolu. D'autre part, vous pouvez, cependant, créer un élément pseudo-relatif, en créant un élément de largeur nulle, de hauteur zéro, positionné de manière relative, essentiellement dans le seul but de créer un point de référence pour la position, et un élément positionné de manière 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>
Nightfirecat
la source
comment hériteriez-vous de la largeur dans ce cas? comme la largeur relative du div est 0, le div absolu ne pourrait pas hériter correctement de la largeur s'ils sont tous les deux dans un conteneur
Alex H
@AlexH Malheureusement, cette méthode n'offre pas de moyen de le faire. Je conseillerais d'essayer la méthode de position négative / marge négative de FredK dans ce cas.
Nightfirecat
104

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

Exemple

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
Fred K
la source
5
a en quelque sorte plus de sens pour moi que l'autre réponse
markasoftware
2
Est-ce que ça marche? J'essaye dans Chrome et ne semble pas fonctionner. Je l'utilise pour positionner les boutons de navigation à partir de slidesjs, ce qui peut aussi être dérangeant.
Petruza
1
J'ai essayé cela avec left: -25px; margin-right: -25px;et cela décale toujours les éléments frères horizontalement de 2-3 pixels pour une raison quelconque.
Mike
Incluez l'utilisation de float:right;lorsque vous souhaitez rendre cela par rapport au côté droit de l'écran afin que les valeurs de droite ou de gauche puissent être plus petites et plus gérables.
Damian Green
gardez à l'esprit que les top:valeurs positives doivent être margin-bottom:égales au moins de la hauteur de l'élément et non au déplacement
Mr Heelis
23

En lisant un peu plus haut, il semble que vous puissiez positionner en absolu un élément tant que l'élément parent est positionné de manière relative. Cela signifie que si vous avez le CSS:

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

Ensuite, l'élément enfant ne prendra pas du tout de place dans le flux de documents. Vous pouvez ensuite le positionner en utilisant l'une des propriétés «gauche», «bas», etc. Le positionnement relatif sur le parent ne devrait généralement pas l'affecter car il sera positionné à sa position d'origine par défaut si vous ne spécifiez pas «gauche», «bas», etc.

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

Jeteon
la source
3

Vous retirez simplement cet élément du flux de documents en définissant position: absoluteet laissez son point de rupture bouger librement avec le flux dynamique de contenu en ne spécifiant pas les propriétés de style left top rightet bottomqui le forceront à utiliser le point de terminaison relatif du flux de manière dynamique. De cette façon, l'élément positionné de manière absolue suivra le flux de documents tout en se retirant de la place.

Aucun emballage factice n'est nécessaire.

Bekim Bacaj
la source
un simple exemple de code pourrait aider beaucoup plus au lieu de lire et de comprendre le paragraphe entier. Bien que le concept soit clair
MR_AMDEV
0

Pour moi, les solutions données n'ont pas fonctionné correctement. Je veux voir un h3, que du texte et après cela Bootstrap-panels, vertical-synchroneous à ces panneaux, je veux voir d'autres panneaux sur le côté droit,

J'ai réussi cela avec un wrapper height: 0 et après cette position: relative; gauche: 100%.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row">
        <div class="col-md-9">
            <div class="col-md-12">
                <h3> hello </h3>
            </div>
            <div class="col-md-12">
                <span> whats up? </span>
            </div>
            <div style="height:0" class="col-md-12">
                <div style="left:100%" class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel2 title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3">
            <!--placeholder-->
        </div>

    </div>
</div>

Reiner
la source
0

@Bekim Bacaj avait la réponse parfaite pour moi, même si ce n'est peut-être pas exactement ce que recherchait l'OP (bien que sa question laisse place à l'interprétation). Cela étant dit, Bekim n'a pas fourni d'exemple.

<h1>Beneath this...</h1>
<style>
    .HoverRight {
        background: yellow;
        position: absolute;
        right: 0;
    }
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>

L'exemple ci-dessus met en place un élément qui ...

  • utilise du CSS pur et simple et rien d'autre
  • est positionné verticalement comme s'il était dans le flux ( topréglage par défaut )
  • est positionné horizontalement sur le bord droit de la page ( right: 0)
  • ne prend pas d'espace, mais se déplacera naturellement à mesure que la page défile ( position: absolute)
John T.
la source