Tricky problem with z-index - how to position a CSS3 triangle under the menu

Hey there, thank you for taking the time to look into my issue.

I'm currently working on a menu design that I would like to resemble this example:

The key feature here is creating triangular shapes on either side and positioning them beneath the menu to create a 3D effect.

I managed to accomplish this successfully on the website mentioned above, but I'm facing difficulties implementing it on another project.

Here is the link to the site where I'm trying to apply this design:

When I set the z-index: -1;, the triangles end up positioned behind all of the background images, including the white background on the body. However, on the other site, setting z-index: -1; places the triangles just above the body background.

I've experimented with setting all background images to z-index: -1;, the triangles to z-index: 1;, and the menu to z-index: 2;, but I still can't get it to work properly.

Does anyone have any suggestions or tips on how I can effectively utilize the z-index property in my specific scenario?

Thank you in advance.

htmlcssz-index

Answer №1

I seem to be struggling with understanding your specific needs, but it appears that the elements you are manipulating have some sort of positioning in place, right? Keep in mind that Z-index will only function properly if these elements are positioned as absolute, relative, or fixed.

For more information on Z-index, check out this helpful resource.

Answer №2

After hours of troubleshooting, I finally found the solution to my problem by following this helpful response: stackoverflow.com/questions/8456575/3d-ribbon-corners-how-to-do

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

Update the div on the current page using externally retrieved information

Once again, I find myself stuck on a problem. Allow me to explain. Within this div, I have retrieved data using HTML SIMPLE DOM from another site. Like so: <div id="data">.....</div> Currently, the data refreshes whenever the user reloads th ...

phpjavascripthtml

What could be causing my website's screen resolution to not fit properly on mobile devices?

Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine ...

javascripthtmlcssresolutionscreen-resolution

What steps can be taken to safeguard the title of the document in the top window from being altered by any iframe or script?

My typical approach is to delete and redefine the title property like in the code snippet below: if (delete document.title) { Object.defineProperty(document, 'title', { get: getter, set: setter, enumerable: true, ...

javascripthtml

Conceal/Inactivate element when scrolling, and once scrolling comes to a halt, reveal it once more

I have been working on creating a div tag to overlay an embed tag and added some javascript to prevent users from right-clicking to download the pdf inside the embed tag (even though it may seem unnecessary, it was requested by my customer). Here is the ma ...

javascripthtmlcss

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

htmlcssflexbox

Enhancing the appearance of CSS Tables

I need help with applying a gradient line below each row of data that I am fetching from my database and displaying in a <table>. I've been able to achieve the design using an <hr> element, as shown here: http://jsfiddle.net/ghrw3k8e/. Ho ...

phpcsshtml-table

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

javascripthtmlreactjstypescriptembla-carousel

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

csspseudo-element

The HTML and body elements do not possess a width of 100% within the document

When viewing my portfolio site on smaller screens such as 425px and below, there is a white gap on the right side. This issue arises because the HTML and body elements do not inherit full width by default. Do you know why this happens and how I can resol ...

htmlcss

Is it possible to utilize nth-child() without recursion?

Can the CSS selector parent child:nth-child() be used to target only children? The HTML code is as follows: <body> <div>div 1</div> <div> div 2 <div>div 2.1</div> <div>div 2.2</ ...

htmlcss

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

Is there a problem with the alignment of

<s:form id="inputThresholdForm" name="inputThresholdForm" theme="simple"> <table border="0" class="display-table" cellspacing="2" cellpadding="2" height="100%" width="100%"> <tr> <td colspan= ...

javascriptjqueryhtmlcss

sticky position is functional in Chrome, however it does not work in Firefox

I am looking to create a vertical div that stretches to the height of its parent container and contains smaller divs. If there is extra space, all divs except for the last one should be positioned at the top, with the last div placed at the bottom. I used ...

csstwitter-bootstrapflexboxbootstrap-4sticky

Shutting down the jQuery pop-up

I am struggling with trying to display this code as a popup on my website. Here is the code I have: <div id="myDialog" title="myTitle"> <div class="table_cell"> <div class="message"></div> </div> <div class="tabl ...

javascriptphpjqueryhtmlyii

CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up? Thank you. I have created a basic fiddle - resize the window to see them inline. JSFiddle div.gallery { border: ...

htmlcssflexboxalignment

The search results in ajax live search are present, but unfortunately they are not displaying on

I am currently working on a code for an ajax live search feature and need some help with getting results to display $(document).ready(function() { $("#search").keyup(function() { var query = $(this).val(); if (query != "" && query.leng ...

htmljqueryajaxsearchlive

The mysterious height phenomenon when setting the width of a list item with jQuery

Consider a basic ul and li setup similar to this: <div id="middle"> <ul> <li> <a> bridal </a> </li> //.... </ul> </div ...

jqueryhtmlcsscross-browser

Autofill feature for styling with CSS within a JavaScript document

Is there a way to enable CSS autocomplete in JavaScript for VS Code? I can easily work with CSS, but the auto suggestions are not showing up when coding in JS. For instance, when typing document.queryselector("myclass")., nothing shows up after the dot li ...

javascriptcssvisual-studio-code

Animate the border to move to the next list item after it is hovered over

Seeking assistance to animate border-bottom movement in navbar Desiring animation effect for hover event on second li item The code for the navbar is as follows: .top-bar { background:#0d0d0d; width:100%; height:85px; position:fixed; top:0; z-index:99 ...

jqueryhtmlcssanimationjquery-animate

Materialize CSS dropdown select arrow out of position

Here is a snapshot of the Materialize CSS, which can be viewed at: However, I am encountering an issue where the dropdown arrow appears below the list instead of on the side. I am currently using Django 3. How can I resolve this? Below is the HTML code ...

cssdjangomaterialize