Float a logo over Nivo Slider in the centre

HTML & CSS
1

Hi there, having issues with placing a logo in the centre of a container and then the bottom of it (transparent PNG) overlapping the Nivo Slider. It works to start with but then the slider goes over the top of the logo then back underneath again. I’m sure it’s something simple i’m missing but any help would be most welcome. Link to test site here:

http://ildolce.co.uk/hiding/

2

Try changing the z-index of .logo from 10 to 51. (style.css line 321)

1 Like
3

Brilliant - worked a treat, thanks for that. I presume there was some sort of priority order and Nivo was 50?

4

nivo-slider.css (line 35)

/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
1 Like
5

Yes. If you go into the Nivo CSS file, the z-index set on those are 50. So Ron gave you 51 which works.
Z-index is the stacking order. If unset, the default is that those later in the source code appears on top…

If a value is set, whatever z-index is highest will appear on top. Simple concept :smile:

1 Like
6

That’s great thanks, noted for the future :slight_smile: