CODEWITHSUNDEEP
cssscrollcss-position
just-boris
just-boris

Reputation: 9746

Fixed block inside scrolling div

I have a block with text, which scrolls when the text is large enough. I want to make an overlay div over this block. I did it like in my demo.

If I set position: fixed to overlay, then it can't be adjusted to its own size relative to wrapping div. If I set position: absolute, the overlay can fit into wrapper, but it can't stay on the top while scrolling text.

How can I overcome this? Is it possible without using javascript?

Upvotes: 2

Views: 4410

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

LIVE DEMO

enter image description here

Some thanges in HTML:

<div class="pane">
  <div class="pane-content">
     <p>Wet oxidation is a form of hydrothermal...</p>
  </div>
  <div class="pane-overlay">Click to hide overlay</div>
</div>

CSS:

.pane {
    width: 600px;
    height:400px;
    position: relative;
}
.pane-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.pane-overlay {
    position: absolute; 
    left:0;
    top:0;
    width: 100%;
    height:100%;
    background: #c2c2c2;
    opacity: 0.6;
}

Upvotes: 2

Michael
Michael

Reputation: 41

Wrap everything inside the pane in a div so that this inner div gets the height of the content.

<div class="pane">
  <div class="inner">
    <div class="overlay"></div>
    content
  </div>
</div>

demo

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

You can use background color and opacity to parent div directly.

And use backgroun: rgba() format to set bg color and opacity, this allows opacity only to bg color not for the text

.pane {
    width: 600px;
    height:400px;
    overflow: auto;
    position: relative;
    background: rgba(194, 194, 194, 0.6);
}

DEMO

Upvotes: 0

Related Questions