How can I make sure that the inset box-shadow completely covers the text inside a div?

I've been struggling to figure out how to get the inset box-shadow (#shadow-overlay) to properly cover the text inside #text-container. Despite my efforts, which included experimenting with z-index and different positioning techniques, I still haven't been successful in achieving the desired effect! What I really need is for the inset box-shadow at the bottom of #shadow-overlay to completely overlay the text within #text-container. Can anyone provide some guidance or assistance on this? Much appreciated!

If you want to take a look, here is the CSS: http://pastebin.com/QdNhCc9H And here is the HTML: http://pastebin.com/D3tYKXky

htmlcss

Answer №1

  1. Include z-index: -2 in the styling for #content-box
  2. Apply z-index: -1 to #text-container
  3. Delete z-index: 2 from the styling of #shadow-overlay

Adjusting the size and position of the overlay may be necessary to ensure it does not obstruct the scrollbar.

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

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

javascripthtmljquerycss

Learn how to fetch user-selected options in Node.js and display the corresponding file contents in a textarea after submission

Hello, I am new to Node.js so please be patient with me. I am struggling to figure out how to retrieve the selected option from a drop-down list after a user submits it and then perform an action based on that choice. Here is an example of what I have in m ...

javascripthtmlnode.jsweb-applicationsweb

The issue arises when the HTML form fails to retrieve input control values during postback

I’m encountering an issue with a basic HTML page that contains a form and some controls. The HTML page is hosted on a server. Whenever I submit the form with values filled in the input fields, the input values do not appear in the form post data. The re ...

htmlformspost

Can you assist with transforming the html, css, and js code into a svelte format using style lang="postcss" specifically for tailwind?

I'm attempting to transform this shining button from a codepen I discovered into a svelte component, but for some reason the sparkles don't appear. I'm unsure if it's relevant, but I'm also utilizing Tailwind CSS, so my style tag h ...

javascripthtmlcsstailwind-csssvelte

Issues with displaying HTML5 audio player in iOS Chrome and Safari browsers

My html5/jquery/php audio player is working well on desktop browsers, but when I tried testing it on iOS, all I could see was a grey track bar. I suspect that the controls are hidden behind the track bar because sometimes the associated file starts playing ...

javascriptjqueryioshtmlaudio

Adding text to a horizontal scrolling element causes the parent div to be pushed downwards

Can anyone help me understand why inserting text into one of the divs in a horizontally scrolling div causes the parent div to move downward? Looking for suggestions! @import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&apo ...

htmlcss

The Twitter Bootstrap template page is leaping past the beginning of the div

Currently, I am utilizing the Twitter Bootstrap template from this source to develop a one-page responsive website. While the template is working effectively, I have encountered an issue with the page jumps in the HTML. Specifically, when navigating to th ...

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3

Retrieve variables from an external JavaScript file

I need to fetch the currentID variable from renderermain.js and utilize it in renderermem.js. However, I am looking for a way to achieve this without modifying mem.html: <script src="renderermain.js"></script> <script src="renderermem.js"& ...

javascripthtml

Centralize and confine the menu division

I have been working on creating a hover menu using CSS and Bootstrap, specifically for flex grid layouts. However, I have run into an issue where my menu is only as wide as its parent div. Furthermore, I am struggling to center the hover menu relative to ...

htmlcss

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

htmlcsscss-transitionsfade

Guide to integrating a legend with ngb-timepicker form?

Is there a way to add a specific tag to the fieldset of ngb-timepicker? I'm having trouble finding a solution for this. Has anyone else tried to do this before? ...

htmlangularlegendtimepicker

Unique button for custom "CODE" in Froala

Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...

javascripthtmlwysiwyg

Ensuring that a $(function() is consistently executed and does not diminish over time

Simply put, I am troubleshooting my website and in order for it to function properly, I need to include the following code: <script type="text/javascript"> $ (function() { RESPONSIVEUI.responsiveTabs(); }); </script> What I& ...

javascriptjqueryhtmlcss

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...

javascripthtmlangularjs

Highcharts plots only appear once the browser window is adjusted

Having some issues while testing out the Highcharts javascript charting library on a specific page. The problem I'm encountering is that none of the data appears until I adjust the browser's size slightly. Prior to resizing, the tooltip does dis ...

javascriptjqueryhtmlcsshighcharts

AngularJS - Enhance table row visibility with ngRepeat for targeted highlighting

Example Data <table class="table table-condensed table-striped table-responsive"> <thead> <tr> <th>Sender</th> <th>Subject</th> <th>Received</th> <th>Actions&l ...

htmlangularjstwitter-bootstrap

Center text vertically within a Bootstrap grid system

I've searched far and wide on Google, Stack Overflow, and other sources for solutions to vertically align text within my code, but I'm struggling to make it work. My code features a form where users can input a 'doom name' and the text ...

htmlcsstwitter-bootstrap

What is the best way to overlay a video onto an image using HTML and CSS?

Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...

htmlcssimagevideo

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

cssangularbootstrap-4z-indexopacity