When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening?

Here is the CSS for the scrolling div:

.product-viewer {
    width: 85%;
    margin-left: 15%;
    display: inline-block;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    height: 300px;
    background-color: #202020;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    z-index: 0;
}

The CSS for the menu bar (with additional styling when fixed in position):

#menu {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: hard-light;
    text-align: center;
    overflow: hidden;
    line-height: 50px;
    display: inline-block;
}

#menu.fix {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
}

For more information, visit:

htmlcsspositionoverflow

Answer №1

It seems that your .cover-image element has a z-index: 0 !important;, causing it to flow under the following element. The issue lies in your markup structure, as your menu is nested within .cover-image and the subsequent element .section.no-select lacks z-index definitions, allowing it to overlap the previous element.

To resolve this issue, simply adjust the z-index property like so:

.cover-image {
    height: 600px;
    height: calc(100vh - 15vmax);
    max-height: 75vh;
    z-index: 1 !important;
}

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

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

javascripthtmlcss

Guide on accessing the text content within a div element in HTML by triggering a button click

To extract specific text from multiple div tags, I need to trigger an event when clicking a button. <div class="col-lg-3 col-md-6 mb-4"> <div class="pricing-table pricing-secondary"> <div class="price-hea ...

javascripthtmljquery

Trouble with selecting a color from the picker tool

Working with HTML markup often presents challenges, especially when it comes to using a color picker on Mac OS. I find that trying to match the exact background color of a div element by picking up color from an image can be tricky. After using the Mac co ...

htmlcss

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

Responsive Div that Resizes Proportionally within Parent Container

Having a div element that adjusts its height based on width to maintain aspect ratio, I aim to place this div within another while maximizing available space vertically and horizontally without any cropping. It seems that object-fit: contain, typically use ...

htmlcsscss-positionaspect-ratio

Steps to insert a new row for a grid item using material-ui

When it comes to breaking a line of grid item like this, the image shown below illustrates how the rest space of the grid should be empty. https://i.stack.imgur.com/pvSwo.png <Grid container spacing={3} <Grid item xs={12}> "Grid Item xs ...

cssreactjsflexboxmaterial-uicss-grid

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

javascripthtmlreactjstypescriptfrontend

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

cssanimation3dtransition

Crafting a captivating stacked image using just two segments

Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. Ho ...

htmlcss

identifying the element targeted on dynamically created links with the help of jquery

I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...

javascripthtmljquery

Whenever I select the checkbox, it causes my Bootstrap modal pop-up to close unexpectedly

I have created a form in a modal popup with 5 checkboxes where autopostback is set to true. Whenever I click on one of the checkboxes, the modal popup automatically closes. I have also used an update panel and included ScriptManager.RegisterStartupScrip ...

jqueryasp.netsql-servertwitter-bootstrapcss

I'm encountering difficulties utilizing ternary operators in TypeScript

I am struggling with ternary operators in TypeScript and need help understanding the issue. Please review the code below: const QuizQuestionContainer = ({ qa }: QuizQuestionContainerPropsType) => { const { question, option1, option2, option ...

htmlreactjstypescriptforms

Utilize jQuery to choose a specific tab

I have implemented a jquery tab in my UI. I want to have the second tab selected when the page loads, instead of defaulting to the tab with the "Active" class. Here is my HTML tab code: <div class="typo"> <div class="container-fluid"> ...

javascriptjqueryhtml

Looking to switch up the background color while scrolling, any tips?

I'm trying to change the background color of my navbar section on scroll, but I've had no luck so far. Below is the code I have been using: const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scro ...

javascriptcssreactjsjsx

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

Currently, I am in the process of developing a web-based drawing application that does not rely on using a canvas. My decision to avoid using a canvas is because I plan to incorporate CSS Keyframes into the HTML elements upon placement. This approach allow ...

javascriptjqueryhtmldrawing

There seems to be a problem with the background repeating space in the CSS

body { background-image: url("https://source.unsplash.com/user/c_v_r/100x100"); background-size: 100px; background-repeat: space; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA- ...

htmlcss

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

javascriptjqueryhtmlcssasp.net-mvc

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?

After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...

htmlcss

Following my ajax submission, the functionality of my bootstrap drop-down menu seems to have been compromised

I'm having an issue with my login page. After implementing Ajax code for the reset password feature, the dropdown menu on the login page doesn't work properly when wrong details are entered and the page reloads. I've tried using the $(' ...

javascriptjqueryhtmlajax