1
I would like to know how to use CSS to put a DIV without position:fixed about the half of another that this with overflow.
I’d like it to stay that way:
The sample code I’m using is:
.div1 {
width: 100px;
height: 200px;
background: #ccc;
overflow-x: auto;
}
.div2 {
width: 50px;
height: 100px;
background: #000;
margin-left: 70px;
}<div class="div1">
<div class="div2"></div>
</div>1
One should not belong to the other, but have to test when they are next to other elements.
.div1 {
width: 50px;
height: 100px;
background: #000;
margin-left: 70px;
position:absolute;
}
.div2 {
width: 100px;
height: 200px;
background: #ccc;
overflow-x: auto;
}<div class="div1"></div>
<div class="div2"></div>0
You can do yes, without touching anything in your code. I just created a pseudo element ::after in div1
See the code, and use the horizontal scroll to see that the ::after is in the middle of the div and is not affected by the scrolling.
As I said I didn’t touch HTML or CSS, I just created the element ::after with style.
.div1 {
width: 100px;
height: 200px;
background: #ccc;
overflow-x: auto;
}
.div2 {
width: 50px;
height: 100px;
background: #000;
margin-left: 70px;
}
.div1::after {
content: "";
width: 50px;
height: 100px;
background: red;
position: absolute;
left: 70px;
top: 8px;
}<div class="div1">
<div class="div2"></div>
</div>Browser other questions tagged html css positioning
You are not signed in. Login or sign up in order to post.
Check out this answer: https://answall.com/a/269014/8063
– Sam
Anything you put inside a div with overflow will be restricted to the area of the div. In this case you should review the structure and position the div differently. You don’t need to use Fixed, but another way in which the div stays where you want in relation to another.
– Sam