What is the process for arranging DIVs in a hierarchy with one beneath the others?

I'm experiencing a challenge regarding the order of layered DIV elements. Specifically, I have a DIV with the class .lens-flare that is positioned at the bottom of the HTML hierarchy. However, when I apply transform: translate to adjust its position to cover the entire parent DIV, it appears above elements that are technically higher in the hierarchy.

In an attempt to resolve this issue, I experimented with setting z-index values and transitioning from translate to translate3d. Unfortunately, these adjustments did not succeed in placing .lens-flare beneath .top-nav-bar, .nav-bar, or .cta.

As a temporary solution, I currently have pointer-events: none applied so that interaction with elements below is still possible. However, I am seeking advice on how to effectively move the .lens-flare layer underneath all other elements.

If you would like to view the project, here's the link to my CodePen

htmlcssparallax

Answer №1

Objects that are rendered later on the screen are perceived as closer to the viewer compared to objects rendered earlier.

If you want to modify this behavior, you can utilize z-index, but keep in mind that z-index only functions with positioned elements.

.lens-flare
  position: relative
  z-index: 1

.nav-bar, .top-nav-bar, .cta
  position: relative
  z-index: 2

Your updated codepen link: http://codepen.io/sEvher/pen/doyWoW

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

Arranging circles on top of each other creates a dark line along the edges with rounded

I find myself entangled in quite the enigmatic venture. My latest project involves crafting a mouse that doubles as a 'torch / searchlight'. Whenever there is a hover action on any text (inline elements, buttons, and so forth), its color transit ...

htmlcssclip-pathmix-blend-mode

Python Selenium: How to interact with an element nested within multiple HTML tags

Currently, I am working on automating a website using selenium webdriver in Python. However, I have encountered an issue when trying to click on a specific tag. The website that I am attempting to automate is quite old and contains numerous iframes and &l ...

pythonhtmlseleniumxpathwebautomation

The button appears flawless in Chrome and Firefox, but unfortunately fails miserably in Internet Explorer. Is there any way to make it functional in all

Check out this JFiddle link: http://jsfiddle.net/Zfnz2/ I'm seeking ideas from the wise minds of the internet. Any thoughts? ...

htmlcssbutton

Minimizing the frequency of getElementById calls for the same HTML element

When dealing with repetitive function calls using the same element as a parameter, is it more effective to store the element as a global variable? For instance, imagine a function that is triggered on every key press and takes an element as an argument. ...

javascripthtmlglobal-variablesgetelementbyid

When adjusting the height of one div, jQuery is causing another div to shift positions

Attempting to transition to tableless layouts using divs has been my recent project. A first attempt can be seen in the inner content of this (german) page: (Shorturl, for testing purposes only and not meant to appear on search engines) Overall, the pro ...

jqueryhtmlcss

Adjusting axis in d3.js and modifying the path's width

I am attempting to modify the width of my axis as follows: Initial configuration with zero width: var x2 = d3.scale.linear() .domain([0, 10]) .range([0, 0]) .clamp(true); svg.append("g") .attr("class", "x axis2") ...

javascriptcssd3.js

How can I design a form that resembles the sign-in form used by Google?

Currently, I am in the process of creating a contact form for a website that is inspired by the design of Google's material sign-in form. I have successfully implemented an effect where clicking on the input field causes the label to change its posit ...

javascripthtmlcssmaterial-design

"Utilizing AJAX in JavaScript to render HTML content and inserting it into an HTML element with a specific id

I ran into an issue while trying to display HTML content in a Bootstrap modal using AJAX. The class seems to be malfunctioning and I'm unable to pinpoint the source of the error. Here's the code snippet: var all_gaugeKritis5 = ""; all_gaugeKrit ...

javascripthtmlajaxcodeigniterbootstrap-4

Troubleshooting problem with RDCOMClient related to UTF-8 encoding

Creating emails with R using the RDCOMClient package has been a challenge for me. The emails contain HTML text encoded in UTF-8 along with images. However, I've encountered an issue where special characters do not display correctly after saving the em ...

htmlrutf-8character-encodingrdcomclient

JS-powered menu links losing color after being clicked

I have a JavaScript rollover switch issue - when I click on the link, the color should stay orange (#f7931d), but it reverts back to grey. What am I missing in my code? CSS: #content-slider { padding-top:5px; height: 240px; width: 359px; ...

css

The website is unable to detect the newly created .scss file

I am new to scss and currently using a Portfolio Template for my website. Recently, I added an extra section to the website. I noticed that when I define a style in an existing _file.scss file, it works perfectly fine. However, when I create a new _filenam ...

htmlcssnpmsass

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

javascriptjqueryhtmlcsseach

Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...

c++cssgtk

Using Angular and ASP.NET for image uploading functionality

Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...

c#htmlasp.netangularjs

"Is it possible to selectively load only a few images on a website that contains numerous

My website displays numerous images hosted on a server. Each page contains a maximum of 100 images, each within its own div element. At any given moment, only one div is visible due to the CSS "display" property, while the others are hidden using display:n ...

javascripthtml

A step-by-step guide to creating adorable rounded corners in a DIV element

I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...

javascripthtmlcss

Arrange a row of six images side by side using responsive Bootstrap styling

Struggling to align 6 images in one row using bootstrap, but only getting 4 images with a large space between them. CSS isn't my strong suit. Here's the HTML Code: <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstr ...

htmlcssbootstrap-4

Including v-menu in a button causes it to vanish in Vuetify

I am facing an issue with my stepper. Specifically, in step 3, I am trying to add a v-menu to a button but when I do so, the button disappears. Below is the code snippet causing the problem: <template> . . . . <v-stepper-step :complete="e6 > ...

javascripthtmlvue.jsmenuvuetify.js

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

javascriptcsstypescriptvue.jssass

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

javascriptandroidhtmlcssweb-applications