CSS Floating with Overlap

Question

I\'m trying to set up a simple horizontal tab structure for a page I\'m working on, and I\'m running into some trouble with floating div\'s combined with z-index.

Viewin

Answer 1

Use the position property for element upper. Adding position:relative to .left.

Answer 2

z-index has no effect on elements that are not positioned (eg position:absolute;)

Answer 3

z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed).

.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }

Will give you what you want I think. I added position: relative; and changed the z-index of the .left to 3 (from 2) and changed the z-index of .right to 2 (from 3).

Answer 4

Negative margin-left?

.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}