

お世話になります。

要素を左の端からはみ出して表示させたいです。  
下のコードのように親要素に  
`overflow:visible`としてもうまくいかないのですね。

元の状態（画像①）  
[![画像の説明をここに入力](https://i.stack.imgur.com/HX2Hz.png)](https://i.stack.imgur.com/HX2Hz.png)

↓  
右にスクロール（画像②）  
[![画像の説明をここに入力](https://i.stack.imgur.com/sJM7W.png)](https://i.stack.imgur.com/sJM7W.png)

∧∧∧∧∧ ここの100pxの部分を表示させたい。

こうしたい（画像③）  
[![画像の説明をここに入力](https://i.stack.imgur.com/S2Xb9.jpg)](https://i.stack.imgur.com/S2Xb9.jpg)

[code]

    <body>
        <div class="container">
            <div class="box">
            </div>
        </div>
    </body>
    
[/code]

[CSS]

[code]

    @charset "UTF-8";
    
    *{
      margin: 0;
      padding: 0;
    }
    
    body{
        background: black;
    }
    
    .container{
        background: gray;
        width: 500px;
        height: 500px;
        position: relative;
        left:-100px;
        /*overflow: visible; 誤り（修正）*/
    }
    
    
    .box{
        width: 200px;
        height: 200px;
        background: tomato;
    }
    
[/code]


CC BY-SA 3.0
2017-08-13T11:15:52.993
37163
2018-05-30T03:57:52.750
2017-08-13T16:02:19.843
12297
12297
question
html css
要素を左の端からはみ出して表示させたい。


こういう感じのをやりたいんでしょうか？

[code]

    *{
      margin: 0;
      padding: 0;
    }
    
    body{
        background: black;
    }
    
    .container{
        background: gray;
        width: 500px;
        height: 500px;
        position: relative;
        /* left:-100px; 削除 */
        overflow: visible;
        margin-left: 100px; /* 追加 */
    }
    
    
    .box{
        position: absolute; /* 追加 */
        width: 200px;
        height: 200px;
        background: tomato;
        left:-100px; /* 追加 */
    }
    
[/code]


CC BY-SA 3.0
2017-08-13T11:54:41.500
37166
2017-08-13T11:54:41.500
19243
37163
answer