Relativement position d'un élément sans prendre l'espace dans le flux de documents

Comment puis-je positionner relativement à un élément, et de ne pas prendre de la place dans le flux de documents?

  • Est-il besoin d'être en position relative? Éléments en position absolue sont retirés de la circulation des documents.
InformationsquelleAutor Web_Designer | 2011-05-18
  1. 265

    Ce que vous essayez de faire des sons comme le positionnement absolu. D'autre part, vous pouvez, cependant, faire une pseudo-relative de l'élément, par la création d'un zéro-la largeur, la hauteur est égale à zéro, en position relative de l'élément, essentiellement dans le seul but de créer un point de référence pour la position, et une position absolue de l'élément à l'intérieur de cette:

    <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>
    • comment voulez-vous hériter de la largeur dans ce cas? depuis la relative div largeur est de 0, l'absolu de la div ne serait pas en mesure d'hériter de la largeur correctement si ils sont à la fois dans un conteneur
    • Malheureusement, cette méthode n'offre pas un moyen de le faire. Je vous conseille de tenter FredK négative de la position négative, en marge de la méthode dans ce cas.
    InformationsquelleAutor Nightfirecat
  2. 91

    Ajouter une marge égale à la pixels que vous avez déplacé:

    Exemple

    .box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
    • en quelque sorte plus de sens pour moi que les autres répondre
    • J'aime cela, car il ne nécessite aucun supplément de balisage.
    • Ce travail? Je suis en train de l'essayer sur chrome et semble ne pas fonctionner. Je l'utilise pour la position des boutons de navigation à partir de slidesjs, de sorte que peut être de jouer avec elle aussi.
    • J'ai essayé cela avec left: -25px; margin-right: -25px; et il a encore des décalages de la fratrie des éléments horizontalement par 2 ou 3 pixels pour une raison quelconque.
    • Inclure l'utilisation de float:right; quand tu veux faire par rapport au côté droit de l'écran, de sorte que les valeurs de droite ou de gauche peut être plus petit et plus maniable.
    • fonctionne pour moi. besoin à la fois de top et margin-bottom.
    • Ce doit être la accepté de répondre à
    • gardez à l'esprit positif top: valeurs que vous avez besoin d'avoir margin-bottom: égale à la borne de l'élément en hauteur pas le déplacement
    • C'est la seule réponse qui a travaillé quand relative de l'élément est à l'intérieur de débordement du récipient avec de défilement. (Les réponses qui mettent de l'élément à l'intérieur invisible absolu div ne fonctionne pas, car il ne sera pas défiler avec le débordement)
    • meilleure réponse!!!!

    InformationsquelleAutor Fred K
  3. 20

    De lire 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;
}

    Alors l'élément enfant ne prendra pas de place dans le flux de documents à tous. 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/

    InformationsquelleAutor jeteon
  4. 3

    Il vous suffit de prendre cet élément hors du flux de documents par la mise en position: absolute, et de laisser le point de rupture se déplacer librement avec la dynamique de l'écoulement du contenu par pas spécifiant le left top right et bottom propriétés de style qui sera en l'obligeant à utiliser la relative point d'arrêt de l'écoulement de façon dynamique. De cette façon, la position absolue de l'élément va suivre le flux de documents lors de la suppression de prendre de l'espace.

    Pas de mannequin wrappers sont nécessaires.

    • un simple exemple de code pourrait aider beaucoup plus à la place de la lecture et de la compréhension de l'ensemble du paragraphe. Même si le concept est clair
    InformationsquelleAutor Bekim Bacaj
  5. 0

    Pour moi, la donnée solutions n'ont pas fonctionné.
    Je veux voir un h3, que du texte et après que Bootstrap-panneaux verticaux-synchroneous à cette des panneaux, je veux voir d'autres panneaux sur le côté droit,

    J'ai réussi cela avec une hauteur:0 wrapper et après cette position:relative;left:100% .

    HTML:

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

    InformationsquelleAutor Reiner
  6. 0

    @Bekim Bacaj eu la réponse parfaite pour moi, même si elle peut ne pas être exactement ce que l'OP a la recherche d' (bien que sa question laisse une marge d'interprétation). Cela étant dit, Bekim n'ai pas de fournir un 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 pure et simple CSS et rien d'autre
    • est positionné verticalement, comme si c'était dans le flux (par défaut top réglage)
    • est positionnés à l'horizontale sur le bord droit de la page (right: 0)
    • ne prennent pas de place, mais va bouger naturellement comme la page défile (position: absolute)
    InformationsquelleAutor John T.