I want the element to stick out from the left edge and display it.

Thank you for your help.

I want the element to stick out from the left edge and display it.

to the parent element as shown in the code below. overflow:visible doesn't work.

Original condition (image 1)

↓
Scroll to the right (image 2)

∧∧∧∧ ここ I want to show you the 100px part here.

I want to do this (image 3)

<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>

CSS

@charset "UTF-8";

*{
  margin:0;
  padding:0;
}

body{
    background:black;
}

US>.container{
    background:gray;
    width —500px;
    height —500px;
    position:relative;
    left: -100px;
    /* overflow:visible;error (correct)*/
}


.box{
    width —200px;
    height —200px;
    background:tomato;
}

html css

2022-09-30 21:26

1 Answers

Do you want to do something like this?

*{
  margin:0;
  padding:0;
}

body{
    background:black;
}

US>.container{
    background:gray;
    width —500px;
    height —500px;
    position:relative;
    /* left: -100px;deleted*/
    overflow:visible;
    margin-left: 100px; /* add */
}


.box{
    position: absolute; /* add */
    width —200px;
    height —200px;
    background:tomato;
    left: -100px; /* Added */
}

2022-09-30 21:26

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656