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

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

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>

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

Exemple

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

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/

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.

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>

@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)