Child element does not follow z-index rules

I have a website Suoi Hong Resort

However, the menu block displays behind the logo.

The navigation class has a position of absolute and a z-index of 3. The logo has a position of absolute and a z-index of 2. The menu block has a z-index of 10. Despite this configuration, the menu block cannot display in front of the logo.

Please assist me with this issue!

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    border: none;
    outline: none;
}
/* More CSS code here */

htmlcssz-index

Answer №1

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    border: none;
    outline: none;
}

@font-face {
    font-family: UTM_Alberta_Heavy;
    src: url("/Styles/CSS/Font/UTM_Alberta_Heavy/UTM ALBERTA HEAVY.TTF");
}

/* Various font-face declarations for different fonts */

.img {
    float: left;
    width: 100%;
    height: 100%;
}

.link {
    float: left;
    width: 100%;
    height: 100%;
}

/* More CSS styling for different elements */


<form>
    <div class="container">
        <div class="navigation">
            <div class="navigation-wrapper">
                /* Navigation menu items */
            </div>
            <div class="logo">
                <a href="/vn/home-12.html" class="link">
                    <h1 class="res-name line-fix-parent-width">Suối Hồng</h1>
                    <div class="res-type line-fix-parent-width">
                        <span class="sp sp-left"></span>
                        <span class="res-cat">Resort</span>
                        <span class="sp sp-left"></span>
                    </div>
                </a>
            </div>
            /* More navigation and logo elements */
        </div>
        <div class="navi-hr"></div>
        
        <div class="wrapper">
            /* Wrapper content */
        </div>
    </div>
</form>

For a demonstration, refer to this code snippet.

Answer №2

The offspring (specifically the menu items) acquire the z-index setting of their parent element. While the parent has a z-index of 10 in its own context, the child elements only reach a z-index of 2 within the overall page structure due to the navigation layer.

If feasible, consider eliminating the z-index property from your navigation section. Alternatively, integrating the logo within the navigation area will ensure it remains in the same z-index context as your menu items.

Answer №3

An issue arises when the logo overlaps the menus or when the navigation background covers the logo.

If you prefer not to modify your HTML, a possible solution is to set the navigation background as transparent and apply the color to its parent element instead.

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

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

javascriptjqueryhtml

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...

htmlcssfontsjekyllwebfonts

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

jqueryhtml

Achieve a full-screen width container in Bootstrap 4 without using the container-fluid class

Is there a way to make the container have a 100% width using media queries so that the elements are contained in a larger screen but not contained in a small one, or vice versa? This code is just an example that used to work with Bootstrap v4 alpha 6, but ...

htmltwitter-bootstrapcssbootstrap-4

What is the best way to create a div that resembles a dotted line?

I have a bar chart type created using different div elements. CSS: .outer, .inner, .target { height: 14px; margin-bottom: 5px; } .outer { background-color: #cccccc; width: 200px; margin: 0 auto; position: relat ...

htmlcss

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: https://i.sstatic.net/4eTpE.png Currently, I have the following (focusing only on the left element for now): https://i.sstatic.net/nUFp1.png I am struggling to make the left arrow transparent and I can't ...

htmlcss

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress

Embed a Telegram account onto an HTML page using the <iframe> element

Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...

javascriptjqueryhtmlajax

Utilizing the dojo.xhrget() Method to Showcase Information in the Dojogrid

Trying to showcase a dataset retrieved asynchronously from the server using the dojo.xhrget() method. The intention is to update the grid with new values each time a user interacts with the content pane, without refreshing the entire page. However, running ...

javascripthtmlajaxdojodojox.grid.datagrid

Arranging divs parallelly while incorporating components within

Striving to create a layout with 3 divs side by side in an HTML document, my initial attempt resulted in this: https://i.stack.imgur.com/CpdLX.png However, I encountered an issue where the div would shift down whenever text or other objects were added: ...

htmlcss

Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is m ...

htmlcssclass

Color of Bootstrap tooltip arrow outline and fill

How can I customize the background color and border color of the tooltip arrow in Bootstrap 4? $(function() { $('[data-toggle="tooltip"]').tooltip() }) .tooltip-main { width: 15px; height: 15px; border-radius: 50%; font-weig ...

csstwitter-bootstrapbootstrap-4

Vue component retrieval on the client side

I am attempting to retrieve a component using Vue with cdn in order to dynamically re-render from a public project that contains a file named cash-sale.vue with the .vue extension. <script> export default { data(){ return { "rows&quo ...

htmlvue.js

Exploring the world of digital audio files and understanding the distinction between 'file:/// and '

I'm experiencing an issue with playing MP3 and MP4 files in Firefox and Internet Explorer. Can someone explain the difference between running a page by double-clicking on it (file:///...) compared to using IIS (http://...)? <object data="../../Med ...

htmlmedia

In a carousel slider, the height and width of divs are not set to specific dimensions

For a code snippet, you can visit this link: here The html: <html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet"> <link href="https://ma ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for triggering data-dismiss after the href has been activated?

Could someone help me with this issue? <a class='btn btn-danger' href='page.html'>Delete</a> I am trying to activate the "data-dismiss" attribute after the "href" is activated. My initial attempt was using this code: < ...

javascripthtmljquerybootstrap-4

retrieve the parent id of <ul> elements and store them in an array

Here is the html code I am working with : <form> <ol> <li id="1" name="grandparent">Grand Parent <ol> <li id="2" name="parent">Parent <ol> <li id="3" name="child">Child < ...

javascriptjqueryhtmlarraysparent

Download the ultimate HTML package with a built-in chart.js component directly from your nuxt app

I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...

javascripthtmlvue.jsnuxt.jsserver-side-rendering

Attempting to arrange form input fields into groups of three columns

I am facing a challenge in arranging my input fields within the form in a column of 3. The issue is that I have more code than anticipated, making it difficult to achieve this layout. Despite several attempts, nothing seems to be working. I have spent hour ...

htmlcssformsflexbox