web-dev-qa-db-fra.com

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

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

htmlcsspositioningcss-position
143
Web_Designer

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>
238
Nightfirecat

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

Exemple

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

En lisant un peu, il semble que vous puissiez positionner un élément de manière absolue tant que l’élément parent est relativement positionné. Cela signifie que si vous avez le CSS:

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

Ensuite, l'élément enfant ne prendra plus de place dans le flux de documents. Vous pouvez ensuite le positionner en utilisant l’une des propriétés "left", "bottom", etc. Le positionnement relatif sur le parent ne devrait normalement pas l’affecter car il sera positionné par défaut à sa position initiale si vous ne spécifiez pas "left", "bottom", etc.

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

17
jeteon

Vous supprimez simplement cet élément du flux de documents en définissant position: absolute et laissez son point de rupture bouger librement avec le flux dynamique de contenu en not en spécifiant les propriétés de style left top right et bottom qui le forceront à utiliser le point de terminaison relatif le flux dynamiquement. De cette façon, l'élément en position absolue suivra le flux de documents tout en évitant de prendre de la place. 

Aucun emballage factice n'est nécessaire. 

2
Bekim Bacaj

Pour moi, les solutions données ne fonctionnaient pas bien ... Je veux voir un h3, puis du texte et après cela, les panneaux Bootstrap, en synchro-verticale avec ce panneau, je souhaite voir d'autres panneaux du côté droit, 

J'ai réussi cela avec une hauteur: 0 emballage 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>

0
Reiner

@Bekim Bacaj avait la réponse parfaite pour moi, même si ce n'était peut-être pas exactement ce que recherchait le PO (bien que sa question laisse place à une 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 définit un élément qui ...

  • utilise du CSS pur et simple et rien d'autre
  • est positionné verticalement comme s'il se trouvait dans le flux (paramètre top par défaut)
  • est positionné horizontalement au bord droit de la page (right: 0)
  • ne prend pas de place, mais se déplace naturellement lorsque la page défile (position: absolute)
0
John T.