web-dev-qa-db-de.com

Fixed position div innerhalb eines relativen übergeordneten div

Ich baue gerade eine responsive Website auf und brauche ein Menü, das korrigiert werden sollte, also nicht scrollen, wenn der Rest der Site scrollt. Das Problem ist, dass es sich um ein fließendes Layout handelt und ich möchte, dass der Menüpunkt "Fest positioniert" relativ zum übergeordneten Element und nicht zum Browserfenster festgelegt wird. kann man das überhaupt machen?

24
Gavin Wood

Diese Frage wurde zuerst bei Google veröffentlicht, obwohl sie eine alte war. Ich poste die von mir gefundene Antwort, die für andere nützlich sein kann.

Dies erfordert 3 Divs einschließlich des festen 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; }
15
Leo

Gavin, 

Das Problem, das Sie haben, ist ein Missverständnis der Positionierung. Wenn Sie möchten, dass es relativ zum übergeordneten Element "festgelegt" wird, möchten Sie wirklich, dass Ihr #fixed ein position:absolute ist, der seine Position relativ zum übergeordneten Element aktualisiert. 

Diese Frage beschreibt vollständig die Positionierungstypen und ihre effektive Verwendung.

Zusammenfassend sollte Ihr CSS sein 

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}
14
Fuzzical Logic

Eine einfache Lösung, die keinen Rückgriff auf JavaScript erfordert und CSS-Transformationen nicht unterbricht, besteht einfach darin, ein Element ohne Bildlauf zu verwenden, das die gleiche Größe wie das Bildlaufelement hat und darüber absolut positioniert ist.

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, um etwas festes zu positionieren.
  • scrolling-contents würde die Größe dieser div umfassen und den Hauptinhalt enthalten
  • fixed-elements ist nur eine absolut positionierte div, die sich über der scrolling-contentsdiv über denselben Bereich erstreckt.
  • durch die absolute Positionierung der div mit der fixed-Klasse wird dieselbe Wirkung erzielt, als wäre sie in Bezug auf die übergeordnete div ortsfest positioniert. (oder der Bildlaufinhalt, da er den gesamten Speicherplatz umfasst)

Hier ist eine Js-Geige mit einem Funktionsbeispiel

7
KernelDeimos

Dies ist möglich, wenn Sie den festen <div> mit Rändern und nicht mit Positionen verschieben:

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

Und dieses HTML:

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

Spielen Sie mit diesem jsfiddle herum.

4
JCOC611

Sie können das feste DIV relativ zum Rest Ihrer Seite mit% -Werten positionieren.

Schauen Sie sich diese jsfiddle hier an, wo der feste DIV eine Seitenleiste ist.

div#wrapper {
    margin: auto;
    width: 80%;
}

div#main {
    width: 60%;
}

div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
}

Und unten ein kurzes Bild, das das Layout oben beschreibt:

 example layout

2
afable

zde je obecnější řešení, které nezávisí na výšce nabídky/záhlaví. jeho plně citlivé, Pure CSS, Firefox, Chrome, Safari, Opera. podporuje rolování obsahu bez ovlivnění menu/záhlaví.

Otestujte zu s tím Working 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>

Služba 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;
}
1
avrahamcool

sie können den Wrapper mit der absoluten Positionierung fixieren . und geben Sie dem div eine feste Position.

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

und div darin 

.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;
}

probieren Sie es aus Es könnte für Sie funktionieren

1

Versuchen Sie die Position: kleben Sie auf dem übergeordneten Element.

1
Lohit Bisen

Probelösung. Prüfen Sie, ob Sie das brauchen. 

<div class="container">
   <div class="relative">      
      <div class="absolute"></div>      
      <div class="content">
        <p>
          Content here
        </p>
      </div>
    </div>
 </div>

Und für CSS

.relative { 
  position: relative;
}

.absolute {
  position: absolute;
  top: 15px;
  left: 25px;   
}

Siehe auf Codepen https://codepen.io/FelySpring/pen/jXENXY

0
Fely Spring