How to use css to override half of another DIV that is overflowing without using position: fixed?

Question

How to use css to override half of another DIV that is overflowing without using position: fixed?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'd like to know how to use CSS to put a DIV without position:fixed on half of another that has overflow .

I would like it to look like this:

ThesamplecodeI'musingis:

.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>

html css posicionamento

asked by anonymous 29.03.2018 / 00:49

2 answers

Good practices for traffic object JSON [closed] Doubt with pdf generation and sending via mpdf

score 1 · Answer 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>

score 0 · Answer 2

Give it a go without touching your code. I just created a pseudo element ::after in div1

See the code, and use the horizontal scroll to see that ::after is in the middle of the div and is not affected by scrolling.

As I said, I did not move in HTML or CSS, I only created the element ::after with the 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>