Positionieren Sie ein Element relativ, ohne dass es Platz im Dokumentenfluss einnimmt

Wie kann ich ein Element relativ positionieren und es nicht im Dokumentenfluss belegen?

Was Sie versuchen, klingt nach absoluter Positionierung. Auf der anderen Seite können Sie jedoch ein pseudorelatives Element erstellen, indem Sie ein relativ positioniertes Element mit einer Breite von Null und einer Höhe von null erstellen, das im Wesentlichen ausschließlich dem Zweck dient, einen Referenzpunkt für die Position und ein absolut positioniertes Element zu erstellen innerhalb dessen:

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

Fügen Sie einen Rand hinzu, der den von Ihnen verschobenen Pixeln entspricht:

Beispiel

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

Wenn Sie ein wenig nachlesen, können Sie ein Element absolut positionieren, solange das übergeordnete Element relativ positioniert ist. Das heißt, wenn Sie das CSS haben:

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

Dann nimmt das untergeordnete Element überhaupt keinen Platz im Dokumentfluss ein. Sie können es dann mit einer der Eigenschaften "left", "bottom" usw. positionieren. Die relative Positionierung auf dem übergeordneten Element sollte sich normalerweise nicht darauf auswirken, da es standardmäßig an seiner ursprünglichen Position positioniert wird, wenn Sie nicht "links", "unten" usw. angeben.

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

Sie nehmen dieses Element einfach aus dem Dokumentfluss heraus, indem Sie es festlegen position: absolute, und lassen seine Bruchstelle frei mit dem dynamischen Inhaltsfluss frei, indem Sie die Eigenschaften und style nicht angeben, die es zwingen, den relativen Endpunkt des Flusses dynamisch zu verwenden. Auf diese Weise folgt das absolut positionierte Element dem Dokumentenfluss, während es sich selbst davon abhält, den Platz einzunehmen.left top rightbottom

Es werden keine Dummy-Wrapper benötigt.

Für mich haben die gegebenen Lösungen nicht gut funktioniert. Ich möchte ein h3 sehen, als Text und danach Bootstrap-Panels, vertikal synchron zu diesen Panels, möchte ich andere Panels auf der rechten Seite sehen,

Ich habe das mit einem Wrapper mit einer Höhe von 0 und danach geschafft: relativ; links: 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 hatte die perfekte Antwort für mich, auch wenn es möglicherweise nicht genau das ist, wonach das OP gesucht hat (obwohl seine Frage Raum für Interpretationen lässt). Davon abgesehen lieferte Bekim kein Beispiel.

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

Das obige Beispiel richtet ein Element ein, das ...

• verwendet schlicht und einfach CSS und sonst nichts
• ist vertikal positioniert, als wäre es im Fluss (Standardeinstellung top)
• befindet sich horizontal am rechten Rand der Seite ( right: 0)
• nimmt keinen Platz ein, bewegt sich aber natürlich, wenn die Seite scrollt ( position: absolute)