Stable element contained within a moving container

My content block has text that scrolls when it becomes too large. I'm trying to create an overlay div on top of this block, and I have implemented a solution in my example.

I encountered issues where setting position: fixed for the overlay prevents it from adjusting to the size of its parent wrapping div. On the other hand, using position: absolute allows the overlay to fit within the wrapper but causes it to move with the scrolling text.

Is there a way to address this challenge without resorting to JavaScript?

cssscrollcss-position

Answer №1

LIVE DEMO

Here are some changes 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;
}

Answer №2

If you want to add a background color with opacity to the parent div, you can do so directly.

Simply use the background: rgba() format to specify both the background color and opacity level. This allows you to apply transparency only to the background color, not affecting the text.

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

Check out the DEMO here!

Answer №3

Enclose all elements within the pane in a div so that this specific inner div can adjust its height based on the content.

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

view demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

cssangularangular-materialmaterial-design

The issue of conflicting stylesheets is causing alignment and height discrepancies when using multiple icons

Is there a way to align icons from different stylesheets to have the same height? When attempting to use icons from separate stylesheets, I encountered a height issue where one icon left space at the top and bottom while another appeared correctly aligned. ...

htmlcssresponsive

The transition in Vue Js is only effective when elements are entering, not when they are

Attempting to implement a vue js transition from bottom to top and top to bottom. The transition works smoothly from bottom to top when entering, but there is no transition effect when leaving. Below is the CSS code for the transition: .slide-details-mob ...

cssvue.js

What techniques can I use to change multiple sibling elements with CSS when hovering over them?

Imagine a scenario where hovering over any row within group 1 changes the color of all rows within that same group. Now, extend this concept to apply to an unlimited number of groups, denoted by N. Let's consider having 300 groups, each consisting of ...

htmlcss

An effective method for modifying the active class on an li element in jQuery and ensuring that the user is directed to the desired page upon clicking the li element

I am facing an issue with my script tag. When I click on the links test.php or test2.php, the active class changes from index.php to the respective file but I am not redirected to the clicked page. I have tried solutions from various sources but none of th ...

javascriptjqueryhtmlcss

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...

javascripthtmlcssangularjs

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

htmlcssreactjsbootstrap-4material-ui

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

Why isn't the HTML template opening in Outlook 7?

Does anyone know how to fix the code issue on Outlook 7? I've only included the header section of my code here, but please let me know if you need more information. I would appreciate any help with this problem. Thanks! ...

csshtml

TSDX incorporates Rollup under the hood to bundle CSS Modules, even though they are not referenced

I have recently developed a React library with TSDX and you can find it here: https://github.com/deadcoder0904/react-typical This library utilizes CSS Modules and applies styles to the React components. Although the bundle successfully generates a CSS fi ...

javascriptcssreactjstypescriptrollupjs

Discover the art of implementing linear gradient backgrounds in Tailwind css effortlessly

Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...

cssreactjsbackgroundtailwind-css

Tips for spinning the background of a button without rotating the button itself

I'm encountering an issue while trying to rotate the background-image within my button. Instead of showing the specified background image, only the background color is visible. The photo includes a transparent section to achieve an arch-like appearanc ...

htmlcsstwitter-bootstrap-3backgroundbackground-image

What is the process for customizing the onmouseover property in HTML?

I am currently working on customizing tabs. I want to underline the title of the active tab, but for some reason I am having trouble achieving this with CSS. It seems like I might need a CSS syntax that I am not familiar with. As a solution, I am consider ...

htmlcssonmouseover

What is the method for applying border-corner-radius exclusively to the left side of a button using jquery-ui-1.9.2.custom?

In my HTML code, I have the following: <div id="ot-lang-src"> <button id="rerun"></button> <button id="select">Choose a language</button> <ul id="ui-menu-left"> < ...

javascriptjqueryhtmlcss

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Enhancing the appearance of forms on Wordpress using ninja forms styling techniques

Seeking assistance in styling a form. After attempting CSS modifications, the form still lacks a background color. Can anyone provide guidance? #nf-form-8-cont { background-color: rgb(214, 214, 194,0.5); padding: 15px; box-shadow: 0px 3p ...

csswordpressformsbrowserstyles

What is the best way to align and adjust the position?

I'm attempting to attach a button to a page. I may not be an expert, but here's what I have so far: body { width:100%; height:100%; background:#181516; overflow:hidden; position:absolute; } .bg { background:url(../im ...

cssbuttoncenter

CSS styles do not apply to PDF files when downloading

My table headers are styled with writing-mode: vertical-lr, and they look perfect on the screen. https://i.sstatic.net/cQ6Vm.jpg However, when I used the same CSS to style the PDF file, the headers did not display vertically. It seems like the PDF file d ...

htmlcsspdfmpdf

Trouble with jQuery's .animate function not behaving as expected

Recently, I posted a query regarding an error in my jQuery code. While that was resolved, I am now facing a new challenge where the code appears fine but fails to execute upon clicking "#equals." Below is the relevant excerpt from my code. HTML <div i ...

javascriptjqueryhtmlcssweb