親の幅内にある固定div？ここ

Question

は、私のホームページの簡易版です。

<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> 

そしてここでは、対応する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 */ 
} 

私はそれが親（親の右端に触れるだ内に収まるように固定要素が欲しいです）。しかし、今は画面の右端に触れています。

これを修正する方法はありますか？ありがとう！

Answer 1

、してみてくださいこの：

.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は、「要素がブラウザウィンドウに対して配置されている」と記述されています。あなたはここで、この効果を達成するためにJavascriptを使用することができますたとえば、あなたはjQueryを使ってそれを行う方法です：あなたは、メインコンテナのプロパティをシミュレートするために、余分な項目を追加することができます

$(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>