Adjust the z-index of the div to control the overflow scrollbar

I am facing an issue with a div that has a horizontal scrollbar and an image (or another div) positioned over the entire page using absolute positioning. The problem is I wish to scroll the div that is beside the image. For anchor links (a), I have set them as relative and applied z-index. Is there a way to apply z-index only for the div's scrollbar so that the div appears behind the image?

Screenshoot Example:

https://i.sstatic.net/enoGr.png

Visual Example:

<div style="overflow-x: scroll; overflow-y: hidden; width: 300px; height: 130px; white-space: nowrap;">
            s sd ds fsd fs df s fs fds fsd fsd fsd fds f sdf sd fs fsd f sdf sd f sdf sd f sdf ds fsdf sf ds f sdf dsf sdf s df sdf sdf ds fsd fsdf sd fds 
            <br/>fsd fds f sd fsd fsd fds fs df sd f sd fds f sd f sdf sd f ds fsdf s df sd fs df sdfsd f 
            <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
            <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
            <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
</div>
<div style="position: absolute; top: 0px; left: 0px;">
            <img src="http://www.wabmo.com/Album/watermark/watermarks/Sample-trans.png" width="300"/>
</div>

Thank you!

javascriptjqueryhtmlcss

Answer №1

Include the CSS property pointer-events:none in a separate div that contains an img element.

<div style="position: absolute; top: 0px; left: 0px; pointer-events:none;">
            <img src="http://www.wabmo.com/Album/watermark/watermarks/Sample-trans.png" width="300"/>
</div>

Answer №2

I trust this resource will be beneficial for you

.example
    {
      position: fixed; top: 10px; left: 5px; pointer-events:none;
    }
    
    <div style="overflow-x: hidden; overflow-y: scroll; width: 400px; height: 150px; white-space: nowrap; ">
                s sd ds fsd fs df s fs fds fsd fsd fsd fds f sdf sd fs fsd f sdf sd f sdf sd f sdf ds fsdf sf ds f sdf dsf sdf s df sdf sdf ds fsd fsdf sd fds 
                <br/>fsd fds f sd fsd fsd fds fs df sd f sd fds f sd f sdf sd f ds fsdf s df sd fs df sdfsd f 
                <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
                <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
                <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
    </div>
    <div class='example'>
                <img src="http://www.example.com/Album/watermark/watermarks/Sample-trans.png" width="300"/>
    </div>

Answer №3

Feel free to experiment with the following CSS code for a text content division:


    z-index: 100;
    position: relative;

To see a demonstration, visit this link.

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

Showing a restricted number of rows in the JSP page

<table class="grid_alt" cellspacing="0" rules="all" border="1" id="id1" style="width:720px;border-collapse:collapse;"> <tbody> <tr align="left"> <th scope="col"><%=partner %></th><th scope="col"><%=item %>< ...

javajavascriptjqueryjsp

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

javascriptphpcssajaxwordpress

Concentrate on implementing Cross-domain Ajax functionality in Opera browser

For a unique and interesting browsing experience, try using Opera 9.62 to explore the nuances of cross-sub-domain JavaScript calls with Ajax. To understand this better, follow these instructions by placing three simple files on appropriate domains. foo.ht ...

javascriptajaxiframe

Explore dual functionality options for a button in Ionic 3

I'm currently developing an app using the Ionic 3 framework. It's a simple calculator app that requires two input fields and a button for calculation. Upon pressing the button, the variables will be computed. Below is my HTML code snippet: <i ...

androidhtmlangulartypescriptionic-framework

Inquiries regarding my Vue testing application integrated with Supabase

I have a query regarding extracting a specific value from an array returned by Supabase. Here is the code snippet I am using: countries.value = parseInt(countries.value.map(({ aantal }) => aantal)); When I don't use parseInt, the number appears l ...

javascriptarraysvue.jssupabase

How can we improve the resizing of images for smaller screens?

Don't let the title fool you. Check out this code: #headerimg { background: url('http://artotek.fi/css/images/artoteklogo.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; border-bottom: solid ...

htmlcss

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: https ...

cssreactjstypescriptnext.jsclassname

The type 'Observable<Response>' does not include a property called 'map'

I recently started learning angular and npm, but encountered an error while trying to replicate some code from a source I found (linked here). It seems like the error is related to my development environment, but I'm having trouble pinpointing the ex ...

javascriptangularjstypescriptnpmvisual-studio-code

What causes text inside a fieldset to sometimes appear bigger when viewed on mobile devices?

Have you ever noticed a strange quirk in Chrome that you couldn't quite explain? I recently stumbled upon a peculiar "feature" while using fieldset with responsive design. It seemed that the text within the fieldset appeared disproportionately larger ...

htmlcssresponsive

Utilize ViewChild to handle changing elements in Angular 2 and Ionic 2 applications

I am facing an issue where I want to dynamically add multiple IonicSlides, but I am unable to use @viewChild. Can anyone suggest a solution for this problem? Template.html : <div *ngFor="let name of title;let i = index;"> <ion-slide ...

javascriptangularionic2viewchild

Ways to employ data binding for extracting a user-input value and performing multiplication operations with the enclosed {{ ...}} tags

My API response includes the price of a product, which is represented as {{price}} I have a system where I can add or reduce the number of products: <div class="number-input"> <h2>Price: {{price }}</h2> <button oncli ...

javascriptangulartypescriptdata-binding

Using JQuery to animate elements by sliding them up, adding a delay, and then sliding them back down

Is there a way to implement sliding up the header with a delay and then sliding it back down repeatedly? Currently, I have a function bound to the form submission but the sliding action only occurs the first time. Here is the code snippet: $(document).rea ...

javascriptjqueryajax

Issue with Material-UI: Inability to Activate the onChangeCommitted Event while Testing

I am encountering issues while testing the onChangeCommitted event with the slider from Mui. I have set up a basic implementation of the slider in a code sandbox environment. You can view the code in this sandbox. The main problem lies in my inability to ...

javascriptreactjsmaterial-ui

Organizing elements in flexbox with Bootstrap: A guide to wrapping order and

While I am using bootstrap 4 to build a top nav, this question is not necessarily specific to bootstrap. The challenge I am facing involves controlling the wrapping behavior of components in the top nav as the screen width changes. I am struggling with ac ...

twitter-bootstrapcssflexboxbootstrap-4

Combine the values of a second array in Javascript when the corresponding values in the first array are equal

Apologies if the title is a bit unclear. Explaining the concept of multiple arrays is a challenge for me. Consider the following array: [ [21, 1000], [21, 500], [18, 100], [18, 200] ] My goal is to obtain the resulting array: [ [21, 1500], [18, 300] ] H ...

javascriptjqueryarrays

Pausing repetitive HTTP requests in an Angular 6 project within a do while loop

While waiting for the completion of one API call, I am recursively consuming an external API. The http calls are being made using import {HttpClient} from '@angular/common/http' As a newcomer to the framework, there may be something wrong in the ...

javascriptangulartypescriptangular-servicesangular-http

Importing data in bulk into Aerospike with NodeJS

My goal is to efficiently insert millions of records in a batch process from MongoDB to Aerospike. I have reviewed the documentation and came across this reference: . However, it seems that only one record can be inserted at a time using this method. I wo ...

javascriptnode.jsmongodbaerospikeaerospike-loader

Error message: Can't find Highcharts in (React JS) environment

I have been encountering an error ReferenceError: Highcharts is not defined, and I've been struggling with this issue for a few days now. Can you provide assistance? In my project, I have Dashboard and Chart files where I import the Chart components ...

javascriptreactjshighcharts

Text Fade-in Animation with CSS 3

Could someone assist me in creating an animation similar to a marquee using CSS "animation" and "keyframes"? I attempted to move text from top to bottom, but encountered an issue where the text would only restart its movement from the top once it reached ...

csscss-animations

Several problems with CSS regarding DIV height set to 100% and the content inside

I'm facing a bit of a puzzle here. I have a div that spans the full height of the browser, with a background set to 100% size and image content contained in two inline divs that are vertically aligned in the middle. In one of these divs, the image is ...

htmlcss