web-dev-qa-db-de.com

Positionieren Sie ein Element relativ, ohne Platz im Dokumentfluss einzunehmen

Wie kann ich ein Element relativ positionieren und im Dokumentenfluss keinen Platz einnehmen?

143
Web_Designer

Was Sie versuchen, klingt nach absoluter Positionierung. Andererseits können Sie jedoch ein pseudo-relatives Element erstellen, indem Sie ein relativ positioniertes Element mit einer Breite von null und einer Höhe von null erstellen, im Wesentlichen nur zum Erstellen eines Referenzpunkts für die Position und eines absolut positionierten Elements innerhalb dieses:

<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

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

Beispiel

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

Wenn Sie etwas nachlesen, scheint es, als könnten 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;
}

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

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

17
jeteon

Sie nehmen dieses Element einfach aus dem Dokumentenfluss, indem Sie position: absolute setzen, und lassen Sie die Bruchstelle frei bewegen, wobei der dynamische Fluss des Inhalts durch not angegeben wird, indem Sie die Style-Eigenschaften left top right und bottom angeben, wodurch der relative Endpunkt von verwendet werden muss die Strömung dynamisch. Auf diese Weise folgt das absolut positionierte Element dem Dokumentenfluss, während es sich selbst aus dem Platz nimmt. 

Es werden keine Dummy-Wrapper benötigt. 

2
Bekim Bacaj

Für mich funktionierten die angegebenen Lösungen nicht gut ..__ Ich möchte ein h3 sehen, als Text und danach Bootstrap-Panels, vertikal-synchron zu diesen Panels. 

Dies gelang mir mit einem Wrapper von Höhe: 0 und hinter dieser Position: 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>

0
Reiner

@Bekim Bacaj hatte die perfekte Antwort für mich, auch wenn es vielleicht nicht genau das ist, wonach die OP gesucht hat (obwohl seine Frage Interpretationsspielraum lässt). Davon abgesehen, gab 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 setzt ein Element, das ...

  • verwendet reines und einfaches CSS und sonst nichts
  • ist vertikal positioniert, als ob es im Fluss wäre (Standardeinstellung top)
  • ist horizontal am rechten Rand der Seite positioniert (right: 0)
  • nimmt keinen Platz ein, bewegt sich aber natürlich beim Scrollen der Seite (position: absolute)
0
John T.