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

186

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

Webdesigner
quelle
2
Muss es relativ positioniert sein? Absolut positionierte Elemente werden aus dem Dokumentenfluss entfernt.
Jason Gennaro

Antworten:

280

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>
Nachtfeuerkatze
quelle
Wie würden Sie in diesem Fall die Breite erben? Da die relative Div-Breite 0 ist, kann das absolute Div die Breite nicht richtig erben, wenn beide in einem Container sind
Alex H
@AlexH Leider bietet diese Methode keine Möglichkeit, dies zu tun. Ich würde empfehlen, in diesem Fall die Methode der negativen Position / negativen Marge von FredK zu versuchen.
Nightfirecat
101

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

Beispiel

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
Fred K.
quelle
5
Irgendwie macht es für mich mehr Sinn als die andere Antwort
Markasoftware
2
Funktioniert das? Ich versuche es in Chrom und scheint nicht zu funktionieren. Ich benutze es, um Navigationsschaltflächen von SlidesJs zu positionieren, so dass es auch zu Problemen kommen kann.
Petruza
1
Ich habe es mit versucht left: -25px; margin-right: -25px;und es versetzt die Geschwisterelemente aus irgendeinem Grund immer noch horizontal um 2-3 Pixel.
Mike
Schließen Sie die Verwendung von ein, float:right;wenn Sie dies relativ zur rechten Seite des Bildschirms festlegen möchten, damit die Werte von rechts oder links kleiner und übersichtlicher sind.
Damian Green
Denken Sie bei positiven top:Werten daran, dass Sie margin-bottom:gleich dem Minus der Elementhöhe und nicht der Verschiebung sein müssen
Mr Heelis
21

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/

Jeteon
quelle
3

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.

Bekim Bacaj
quelle
Ein einfacher Beispielcode könnte viel mehr helfen, anstatt die gesamte Paragrah zu lesen und zu verstehen. Obwohl das Konzept klar ist
MR_AMDEV
0

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>

Reiner
quelle
0

@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)
John T.
quelle