Fest positioniertes div innerhalb eines relativen Elternteils

Ich bin derzeit am bauen einer responsive Webseite und brauche ein Menü behoben werden, damit nicht scrollen, wenn der rest der Seite scrollt. das Problem ist, dass es ein fluid layout und ich möchte die "Fixer" Menüpunkt behoben werden relativ zu der mit dem übergeordneten element und nicht zum Browserfenster. gibt es trotzdem, diese kann getan werden?

InformationsquelleAutor der Frage Gavin Wood | 2011-10-21

css fixed

12

Gavin,

Den Punkt, den Sie haben, ist ein Missverständnis zu positionieren. Wenn Sie möchten, es zu sein "festen" Verhältnis zu den Eltern, dann Sie wirklich wollen, Ihre #fixed zu position:absolute die Aktualisierung seiner position relativ zum übergeordneten.

Diese Frage vollständig beschreibt, Positionierung Arten es gibt und wie Sie Sie effektiv nutzen können.

In der Zusammenfassung, Ihre CSS sollte
```
#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}
```
InformationsquelleAutor der Antwort Fuzzical Logic

Diese Frage kam zuerst auf Google-obwohl alt, so bin ich Entsendung der arbeiten Antwort, die ich gefunden, die von nutzen sein können, um jemand anderes.

Dieser benötigt 3 divs einschließlich der fixed-div.

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { position:relative; width:1280px; }
    .parent { position:absolute; }
        .child { position:fixed; width:960px; }

InformationsquelleAutor der Antwort Leo

7

Eine einfache Lösung, die nicht die Rückgriff auf JavaScript und wird nicht brechen, CSS-Transformationen, ist einfach eine non-scrolling-element, das dieselbe Größe wie Ihr scrolling-element, das absolut positioniert über.

Die grundlegende HTML-Struktur wäre
```
<div class="parent-to-position-by">
    <div class="fixed-elements">
        <div class="fixed">
            I am &quot;fixed positioned&quot;
        </div>
    </div>
    <div class="scrolling-contents">
        Lots of contents which may be scrolled.
    </div>
</div>
```
- parent-to-position-by wäre die relative div an-position etwas fester mit Respekt.
- scrolling-contents überspannen würde die Größe dieses div und enthalten seine wichtigsten Inhalte
- fixed-elements ist nur eine absolute positioniert div über den gleichen Raum über den oberen Rand des scrolling-contents div.
- durch die absolute Positionierung der div mit der fixed Klasse, es erzielt den gleichen Effekt, als wenn Sie behoben wurden positioniert in Bezug auf das übergeordnete div. (oder das scrollen von Inhalten, da Sie span, full space)
Hier ist ein js-fiddle mit einem Beispiel arbeiten

InformationsquelleAutor der Antwort KernelDeimos

Dies ist möglich, wenn Sie bewegen Sie den festen <div> mit Margen und nicht Positionen:

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{ 
   position:fixed;
   width:10px;
   height:10px;
   background-color:#333;
   margin-left:200px;
   margin-top:200px;
}

Und das HTML:

<div id="wrap">
   <div id="fixed"></div>
</div>

Spielen, um mit diesem jsfiddle.

InformationsquelleAutor der Antwort JCOC611

hier ist eine generische Lösung, die nicht, hängt von der Menü - /Kopf-Höhe.
seine voll ansprechbar, Reine CSS-Lösung, Funktioniert Super auf IE8+, Firefox, Chrome, Safari, opera.
unterstützt Inhalte scrollen, ohne die Menü/Header.

Testen Sie es mit Arbeitet Fiddle

Html:

<div class="Container">
    <div class="First">
        <p>The First div height is not fixed</p>
        <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, using Pure CSS 2.1 only</p>
    </div>
    <div class="Second">
        <div class="Wrapper">
            <div class="Centered">
                <p>The Second div should always span the available Container space.</p>
                <p>This content is vertically Centered.</p>
            </div>
        </div>
    </div>
</div>

Der CSS:

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.First
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}

.Second
{
    position: relative;
    z-index: 1;
    /*for demonstration only*/
    background-color: #6ea364;
}

    .Second:after
    {
        content: '';
        clear: both;
        display: block;
    }

/*This part his relevant only for Vertically centering*/
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
    .Wrapper:before
    {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

.Centered
{
    display: inline-block;
    vertical-align: middle;
}

InformationsquelleAutor der Antwort avrahamcool

1

Eine einfache Sache, die Sie tun können, ist Ihre position fixed DIV relativ zu dem rest der Seite mit % - Werten.

Schauen Sie sich dieses jsfiddle hierwo die festen DIV ist eine sidebar.
```
div#wrapper {
    margin: auto;
    width: 80%;
}

div#main {
    width: 60%;
}

div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
}
```
Sowie eine kurze Bild unten beschreibt das layout oben:

InformationsquelleAutor der Antwort afable

kann man den wrapper mit absoluten Positionierung.
und die geben im inneren div eine Feste position.

.wrapper{
 position:absolute;
 left:10%;//or some valve in px
 top:10%; //or some valve in px
 }

und
div drinnen, dass

.wrapper .fixed-element{ 
position:fixed;
width:100%;
height:100%;
margin-left:auto; //to center this div inside at center give auto margin
margin-right:auto;
}

versuchen Sie dies, Es könnte für Sie arbeiten

InformationsquelleAutor der Antwort Mandar Kawtakwar

1

Versuchen, Position:sticky auf das parent-element.

InformationsquelleAutor der Antwort Lohit Bisen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.