Comment puis-je positionner un élément de manière relative sans qu'il prenne de la place dans le flux 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?
Réponses:
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;
}
left: -25px; margin-right: -25px;
et cela décale toujours les éléments frères horizontalement de 2-3 pixels pour une raison quelconque.
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.
top:
valeurs positives doivent être margin-bottom:
égales au moins de la hauteur de l'élément et non au déplacement
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: absolute
et 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 right
et bottom
qui 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 ...
top
réglage par défaut )right: 0
)position: absolute
)