overflow-y: scroll; を指定すると left:-50px のエレメントが表示されない

下記のようなコードを作成しています。
全体をdisplay: flex;にて２つの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件

ベストアンサー

overflow-y: scroll;を施したエレメントの外側に表示するというのは無理があるような気がしてきました。
そこでmain自体をdivで囲んで、そのdivにおいてoverflow-y: scroll;にすることにしました。

上記により目的が達成できました。

body背景色の上に表示された浮遊したエレメントを表示させようとしています。
この .item も.main内部でコンテンツと一緒にスクロールする必要があります。

投稿2017/04/06 11:08

退会済みユーザー

総合スコア0

こうするとか。

HTML
1<div class="sidebar">
2</div>
3<div class="main">
4    <div class="item"></div>
5    <div class="scroll"></div>
6</div>

CSS
1    /* 略 */
2    .main {
3        background-color: skyblue;
4        display: block;
5        /*overflow-y: scroll;*/
6        margin-left: 50px;
7        width: calc( 100% - 300px );
8        position: relative;
9    }
10    /* 略 */
11    .scroll {
12        width: 100%;
13        height: 100%;
14        overflow-y: scroll;
15    }
16```**動くサンプル：**[https://jsfiddle.net/15gds4Lk/](https://jsfiddle.net/15gds4Lk/)