CODEWITHSUNDEEP
htmlcsshtml-lists
Roh-Land
Roh-Land

Reputation: 491

Css using z-index with unordered list

Good day
I have this example:

http://jsfiddle.net/xARSw/

<ul>
    <li id="li1">li 1</li>
    <li id="li2">li 2</li>
    <li id="li3">li 3</li>
</ul>

and CSS:

li {
    border:solid 1px red;
    float:left;
    width:150px;
    height:150px;
    -webkit-border-top-left-radius: 50px;
    -webkit-border-top-right-radius: 50px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    text-align:center;
    list-style: none;
}
#li1 {
    background:#282828;
}
#li2 {
    margin-left:-15px;
    background:#888888;
}
#li3 {
    margin-left:-15px;
    background:#B8B8B8;
}

What I'm trying to do is to show li2 behind li1 and li3 behind li2.

I was trying to use z-index but did not get any result. Any help or advice? Regards.

Upvotes: 2

Views: 964

Answers (3)

John Smith
John Smith

Reputation: 1814

you definately need position absolute or relative and then just count down 

li {
  position:relative;
}
#li1 {
   z-index:3;
}
#li2 {
    margin-left:-15px;
    z-index:2;
}
#li3 {
    margin-left:-15px;
    z-index:1;
}

Upvotes: 0

Adaz
Adaz

Reputation: 1665

z-index works only when element is positioned either absolute or relative, example: http://jsfiddle.net/xARSw/3/

I've set position: relative; to all list items and set the z-index to 2 and then I changed the z-index of the second element to 1.

Upvotes: 2

emerson.marini
emerson.marini

Reputation: 9348

#li1,
#li2,
#li3
{

    position:relative;
}

#li1
{
    z-index:100;
}

#li2 
{

    z-index:90;
}

#li3 
{

    z-index:80;
}

Upvotes: 1

Related Questions