Positioning elements using z-index in HTML and CSS

Feedback


Question:

My web design comprises three components.

  • The classic list (menu) comprises of

    <ul>

    and

    <li>

    , both of which are part of the red section.
  • The yellow section is a separate list from the previous red section labeled as
    list (submenu
    .
  • Typically, the standard code

    <div>

    is associated with the blue section.

Can you please provide me with the HTML or CSS code that arranges the list items in the order of yellow on top, blue in the middle, and red at the end, using z-indexes?

HTML




    
        
        
        
    
    
        
        
DIV


Solution 1:

It is achievable when the positions of the blue and yellow are fixed.

.menu {
    position: absolute;
    background-color: red;
    width: 150px;
}
.submenu {
    position:absolute;
    z-index: 11;
    font-size: x-large;
    background-color: yellow;
}
.obsah {
    position:absolute;
    color: white;
    background-color: blue;
    width: 150px;
    height: 50px;
    z-index: 10;
}

demo


Solution 2:


It is not possible to utilize the div tag within a “UL” list, but you can make reference to the section using the :before and :after CSS Filters.


Solution 3:


Did removing the ‘position:relative;’ designation solve the issue as demonstrated in this example?

.menu {
    position: absolute;
    background-color: red;
    z-index: 8;
}
.menu .submenu {
    z-index: 10;
    font-size: x-large;
    background-color: yellow;
}
.obsah {
    color: white;
    background-color: blue;
    width: 150px;
    height: 50px;
    z-index: 9;
}

Frequently Asked Questions

Posted in Css