Ein fester div, der innerhalb der Breite seiner Eltern bleibt?

Question

Hier ist eine vereinfachte Version meiner Homepage:

<div class="main"> 
    <div class="content"> all the content of my website </div> 
    <div class="nav"> fixed on the screen and always visible </div> 
</div> 

Und hier ist die entsprechende CSS:

.main { 
    max-width: 500px; 
    height: 2000px; 
    margin: auto; 
    background-color: grey; 
} 

.nav { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    position:fixed; 
    right: 0; /* that's the issue */ 
} 

ich das feste Element möchte bleiben in ihr Eltern (Berühren des rechten Rand seiner Eltern). Aber jetzt berührt es den rechten Rand des Bildschirms.

Irgendeine Idee, wie man das repariert? Vielen Dank!

Answer 1

Sie können ein zusätzliches Element fügen Sie die Eigenschaften des Hauptbehälters zu simulieren, versuchen dies:

.main { 
 
    max-width: 500px; 
 
    height: 2000px; 
 
    margin: auto; 
 
    background-color: grey; 
 
} 
 
.nav { 
 
    position:fixed; 
 
    max-width:500px; 
 
    width:100%; 
 
} 
 
.nav > div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    float:right; 
 
}

<div class="main"> 
 
    <div class="content">all the content of my website</div> 
 
    <div class="nav"><div>fixed on the screen and always visible</div></div> 
 
</div>

Answer 2

position: fixed wird wie folgt beschrieben: "Das Element wird relativ zum Browserfenster positioniert". Sie Javascript verwenden können, um diesen Effekt zu erreichen, ist hier, wie Sie es tun mit jQuery, zum Beispiel:

$(window).scroll(function() { 
 
      var y = $(window).scrollTop(); 
 
      $(".nav").css('top', y); 
 
});

.main { 
 
    max-width: 500px; 
 
    height: 4000px; 
 
    margin: auto; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
.nav { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    right: 0; /* that's the issue */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="content"> parent </div> 
 
    <div class="nav"> fixed to parent width </div> 
 
</div>