HTML + CSS: z-index positioning

Question

My webdesign is consisted of three parts.

The red part is <ul>and <li>, classic list (menu).
Yellow part is another list in previous red list (submenu) and
blue part is normaly <div>.

I need the yellow list on top, blue in middle and red at the end only in HTML or CSS with z-indexes.

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .menu {
                position: absolute;
                background-color: red;
                z-index: -2;
            }

            .submenu {
                z-index: 99999;
                font-size: x-large;
                background-color: yellow;
            }

            .obsah {
                position: relative;
                color: white;
                background-color: blue;
                width: 150px;
                height: 50px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li>MENU
                <ul class="submenu">
                    <li>SUBMENU</li>
                </ul>
            </li>
        </ul>
        <div class="obsah">
            DIV
        </div>
    </body>
</html>

Can you list your current html structure as well as styles?

peterdotjs
– peterdotjs

2015-03-09 01:53:11 +00:00
Commented Mar 9, 2015 at 1:53 — peterdotjs
– peterdotjs, Commented Mar 9, 2015 at 1:53
something is missing here

mkoryak
– mkoryak

2015-03-09 01:53:14 +00:00
Commented Mar 9, 2015 at 1:53 — mkoryak
– mkoryak, Commented Mar 9, 2015 at 1:53

Kelvin Barsana · Accepted Answer · 2015-03-09 08:05:25Z

1

this is possible if the position of the yellow and blue are absolute

.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

answered Mar 9, 2015 at 8:05

Kelvin Barsana

86414 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Usama Noman · Accepted Answer · 2015-03-09 01:54:30Z

0

I don't think you can use div with in "UL" list. However you can refer the part with :before and :after CSS Filters.

answered Mar 9, 2015 at 1:54

Usama Noman

5031 gold badge4 silver badges11 bronze badges

Comments

dbp · Accepted Answer · 2015-03-09 02:43:01Z

0

So something like this? Removing the position:relative; designation seemed to resolve the issue.

.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;
}

answered Mar 9, 2015 at 2:43

dbp

3733 silver badges18 bronze badges

1 Comment

Jan Radosta Over a year ago

Almost, but the blue part must be middle of red and yellow (red is at the bottom and yellow on the top).

Collectives™ on Stack Overflow

HTML + CSS: z-index positioning

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related