下記のようなコードを作成しています。
全体をdisplay: flex;
にて2つのdiv
を横並びに表示しています。
divはそれぞれ単独で内部のエレメントがスクロールできるようにoverflow-y: scroll;
を指定します。
右側のdivにはmargin-right
を指定して余白を作りbody背景色が表示されるようにしています。
ここで.item
をleftをマイナス表示させることによって
body背景色の上に表示された浮遊したエレメントを表示させようとしています。
この .item も.main内部でコンテンツと一緒にスクロールする必要があります。
(実際のページにはこのエレメントにも必要性があります)
しかしながらoverflow-y: scroll;
ナシのときには思い通りの表示となるのですが、
overflow-y: scroll;
が指定されているとbody背景色は表示されますが.item
が表示されません。
z-index
で操作をしても表示されませんでした。
このような場合、どのように調整すれば.item
を表示させることができるでしょうか。
よろしくお願いします。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>overflow-y: scroll; test</title> 6<style> 7 html,body { 8 height: 100%; 9 margin:0; 10 padding:0; 11 } 12 body { 13 display: flex; 14 } 15 .sidebar { 16 background-color: whitesmoke; 17 display: block; 18 overflow-y: scroll; 19 height: 100%; 20 width: 300px; 21 } 22 .main { 23 background-color: skyblue; 24 display: block; 25 overflow-y: scroll; 26 margin-left: 50px; 27 width: calc( 100% - 300px ); 28 position: relative; 29 } 30 .item { 31 width: 50px; 32 height: 50px; 33 background-color: lightseagreen; 34 position:absolute; 35 top: auto; 36 left: -50px; 37 38 } 39</style> 40</head> 41 42<body> 43<div class="sidebar"> 44</div> 45<div class="main"> 46 <div class="item"></div> 47</div> 48 49</body> 50</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。