質問: ### 前提・実現したいこと CSSとHTMLで、ブラウザの勉強をしています。 ページ内リンクを、左側端へ縦に並べようと思い transform、position タグを使ってみたところ、 スクロールを行うとメインコンテンツを置いている右側に 謎のコンテンツが出てくるようになりました。 恐らく、縦にしたページ内リンクの影のようなものかと思うのですが メインコンテンツに被らないように設定できないでしょうか。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/e242adff441ce83301f30e89cd2f9fe5.jpeg) ### HTML ``` A B C D E F ``` ### CSS ``` *{ margin:0; padding:0; background-color:green; color:#f5f5f5; font-size:18px; font-family:Arial,"Sawarabi Gothic","メイリオ",sans-serif; text-decoration:none; list-style:none; box-sizing:border-box; } #main-contents{ position:relative; } ul{ font-size:1.2rem; transform:rotate(90deg); display:flex; } .nav{ position:fixed; bottom:160px; left:-150px; z-index:1; } section{ margin:0 5% 0 15%; display:flex; padding:0 5% 5%; border:0.25rem dashed #f5f5f5; border-radius:0 15px 0; z-index:10; } ``` ### 試したこと z-index を使ってみましたが改善できませんでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) 勉強したてで、CSS・HTML以外は分かっておりません。 CSSでの解決策があれば、よろしくお願いいたします。
回答: navクラスにposition:fixed を付けており、それの影響か navクラスに対して空白が生まれていました。 position:fixed をulに設定したところ 空白がなくなりました。 閲覧いただいた方がおりましたら、ご面倒をおかけしました。 もう少し確認したうえで質問するよう注意いたします。