position: fixed; でサイドバーを固定できません
解決したいこと
プログラミング初学者です。
HTML/CSS/railsを使って投稿機能のある自作アプリを作っています。
左右のサイドバーとヘッダーを固定して中央の投稿されたツイートをスクロールで見れるようにしたいです。
position fixedを使いサイドバーを固定したいのですが、fixedを使うとビューが崩れてしまいます。
かなり初歩的な部分だとは思いますが、ご教授頂けると幸いです。
↓実際のビュー
position: fixed;
top: 0px;
をかけたとき
https://gyazo.com/66b935d6c110a3becd85062e6b9d00e0
左のサイドバーのみ適用されない
https://gyazo.com/e025eee8b926e1b4bc094c241be05c0a
発生している問題・エラー
左のサイドバーにposition: fixed;をかけるとなぜかセンターのビューが左上基準で重なってしまう。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ。
該当するソースコード
HTML
<div class="wrapper">
<div class="side-view">
<%= render "side_bar" %>
</div>
<div class="main-view">
<%= render "main_view" %>
</div>
<div class="runking-view">
<%= render "side_runking" %>
</div>
</div>
左サイドバーのCSS
.wrapper {
display: flex;
height: 100%;
width: 100%;
z-index: 1;
}
.side-view {
position: fixed;
top: 0px;
height: 100vh;
width: 300px;
border-right: solid 1px #000000;
background-color: #D3C9C6;
}
センターのヘッダーCSS
.main-view {
background-color: #ffffff;
height: 100vh;
width: calc(100% - 600px);
}
.top-header {
position: sticky;
top: 0px;
height: 100px;
background-color: #D3C9C6;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px #000000;
}
右側のサイドバーCSS
div.runking-view {
position: fixed;
top: 0px;
right: 0px;
}
.runking_contents {
display: flex;
flex-direction: column;
align-items: center;
background-color: #D3C9C6;
height: 100vh;
width: 300px;
border-left: solid 1px #000000;
}
自分で試したこと
親要素にtransformがかかっているとできないみたいですが特にそのようなスタイルは確認できなかったです。
原因が分からなかったので、ご教授頂けると幸いです。
0
