Guide on achieving a full scrollable parent by positioning a pseudo-element absolutely

I am trying to have a position: absolute element fill its parent, even if the parent is scrollable.

To demonstrate this issue, I created a codepen example.

Although the red overlay fills the div initially, it does not stay overlaid when the content is scrolled. Is there a way to make sure it fully overlays the parent even when scrolled?

Answer №1

To achieve the desired effect, a buffer must be inserted between the content and the scrolling container:

.container {
  background-color: #e0e0e0;
  margin: 20px;
  padding: 20px;
  position: relative;
  max-height: 150px;
  overflow: scroll;
}
.buffer {
  min-height:100%;
  position:relative;
}
.buffer:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background-color: rgba(255,0,0,0.5);
  /*pointer-events:none; if you want links and forms reachable */
}
<div class="container">
  <div class="buffer">
    [Content goes here]
  </div>
</div>

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

Hover Link Overlay [CSS / HTML] - An Alternative Style for Link Interaction

I'm having trouble making an image clickable within a hover effect overlay that displays text and a link. I attempted to turn the overlay into a link, but it wasn't successful. http://jsfiddle.net/cno63gny/ Please disregard the placeholder text ...

Saving downloaded web pages as an HTML document

I'm looking to extract the HTML content of a webpage. Within this HTML, there are two specific elements with XPaths that I need to retrieve. Unfortunately, my knowledge on this subject is quite limited. While searching for solutions, most examples in ...

The output is not shown because the form data is not being generated properly by document.getElement

<html> <head> </head> <body style = "text-align:center;" id = "body"> <form id = "number" method="get" name="number"> <input type="text" id="number1" name="number1" value="" /> <input type="text" id="number2" name="nu ...

Find the total sum of various spans

As a beginner in programming, I am facing a challenge that I cannot seem to solve. How can I retrieve the values of multiple spans with the same class? This is how the HTML code looks: <ul> <li> <input type="checkbox" value="30 ...

Deciding which HTML element to display in AngularJS

What is the method of selecting which HTML element to display in AngularJS? When retrieving a value from the database, if it is YES, I would like to display this: <i class="fa fa-check"></i>, otherwise display this: <i class="fa fa-times"& ...

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...

Issue with Bootstrap 5 and vertical ruler (vr) not displaying current color

Utilizing the vr feature from Bootstrap 5 to establish vertical ruler divisions in col-sm-1 between three chartjs graphs in col-sm-3. Encountering a peculiar issue where one vr appears slightly darker than the other. Struggling to determine the cause of th ...

Resolving the transition effect problem in Tailwind CSS and Alpine JS

I have successfully implemented a basic button and modal combination using Tailwind and Alpine - check out the demo here: https://jsfiddle.net/0pso5cxh/ However, I am facing an issue with the leave transition. When the cancel button or close icon is click ...

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples. I have devised two solutions without using flexbox, but both seem somewhat like hacks. body { margin: 0; padding: 0; } .header { width: ...

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

"Angular 6: A Guide to Customizing Text Colors Based on Status

I have a view on angular just like this: https://i.sstatic.net/JimWN.png And this is my dashboard.component.ts: export class DashboardComponent implements OnInit { tablePresetColumns; tablePresetData; ngOnInit() { this.tablePresetColumns = [{id: ...

What is the process for displaying a document file in an iframe that is returned from a link's action?

I have a main page called index.cshtml. This page displays a list of document files along with an iframe next to it. My goal is to load the selected document file into the iframe when I click on any item in the list. However, currently, when I click on a d ...

Refreshing pane content within Kendo UI Splitview

I am utilizing the Kendo UI splitview. In my setup, I have configured one pane on the left for navigation and another pane on the right for content display. The left pane contains 4 navigation links structured as follows: <div data-role="pane" id="si ...

Learn how to prevent two-finger swipe forward/backward on a trackpad using JavaScript or HTML

My app includes a functionality where the URL changes when transitioning from one state to another, for example from home/#state to home/#state2. However, I noticed that when I perform a two-finger swipe using the trackpad from home/#state2, the page navig ...

What could be causing the unexpected behavior of nth-child?

I'm trying to position an image with the class photo, but unfortunately, the nth-child selector is not having any effect on that particular element. I have searched for various solutions, but none seem to be working! .container { height: 100vh; ...

Chrome browser alignment problems

Here are the lines in my code: <TD id=“avail_1” style=“display:none;availability:hidden”>UrgentAvail</TD> <TD id=“avail1_1” style=“display:none;availability:hidden”>substitutedBy</TD> When I test the application o ...

Ways to retrieve the value from a button when it is clicked

I am facing an issue where I have buttons that are generated dynamically depending on the number of phone numbers available in the database. For example, if there are 3 phone numbers in the database, there will be three buttons displayed. The aim is that w ...

Having trouble with centering my div in HTML and CSS

Coding Challenge .nav_bar { position: absolute; top: 0; width: 800px; height: 23px; display: inline-block; text-align: center; background-color: #0090bc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 2px solid #004D6F; -web ...

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...