CODEWITHSUNDEEP
csspositioningz-index
Jean Piere
Jean Piere

Reputation: 1

CSS make li element appear outside of the ul

Considering this code:

<div class="menu">
<ul>
    <li class="active">I'm active!</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

My .menu div has a 1px black border, and my .active list element has a white background. Now, I want my .active list element to be "outside" of the div, and overlap with the border, hiding it partially with the white background. How is this achievable?

To illustrate what I want;

This is what I have at the moment, coded up; https://i.sstatic.net/cVZHt.png

And this is what it should look like; https://i.sstatic.net/gp2k2.png

Upvotes: 0

Views: 3151

Answers (3)

My Head Hurts
My Head Hurts

Reputation: 37675

Some CSS black magic for you.

Working example below which should work cross browser. Please ask if you would like an explanation how it works.

JSFiddle

Enjoy.

Upvotes: 1

riwalk
riwalk

Reputation: 14233

Use relative positioning.

.menu li {
    position: relative;
    top: 1px;
}

Couple of things to note to make sure that this works:

  • The fact that this is on all li elements is intentional. If I only put it on the selected one then the selected one would appear shifted down.
  • This will only work if the blue background is a part of the ul tag and the li tag has a transparent background (other than the image of course). Otherwise you might cover up all of the border from the ul element.

And one more thing (just 'cause). You have this:

<div class="menu">
<ul>
...
</ul>
</div>

The ul tag is perfectly capable of having a class by itself. Unless you have a very good reason not to, just do this:

<ul class="menu">
    ...
</ul>

Upvotes: 2

possan
possan

Reputation: 525

Is it the z-index you're looking for?

div.menu li.active { z-index: 99; ... }

then you could use negative margins to position it "outside", or better yet nest another element that you can position relatively.

Upvotes: 0

Related Questions