Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Divs overlapping, how do I force one above the other?

Tags:

html

css

I'm new to CSS and trying to build my site. I'm coming across a problem. I've created a div with a fixed position, however it is appearing below other elements on the site. How do I force it to the top?

div#floater {     position: fixed;      top: 420px;      left: -110px;    }  div#floater:hover {     left: 0; 

The site can be found at goinnativerecords.com (hover over the images to the side). I know my coding isn't the cleanest (tips are appreciated).

Thanks!

like image 681
Orun Avatar asked Jun 15 '11 06:06

Orun


People also ask

How do I make two divs stack on top of each other?

Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.

How do I make one div appear above another?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do you make divs float next to each other?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.


2 Answers

simply use z-index:

z-index : 1; 

Note that z-index only works on elements that have some kind of positioning set (relative, absolute, fixed)

nuances:

Elements with a higher z-index will appear in front of elements with a lower z-index in the same stacking context. If two elements have the same z-index, the latter one appears on top. Stacking context is defined by:

  • The Document Root
  • Elements with position: absolute or position: relative and a z-index
  • Elements that are partially transparent, that is they have an opacity < 1
  • In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)

If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1 to any element that also has some position set.

like image 96
Nobody Avatar answered Sep 28 '22 03:09

Nobody


Make use of CSS z-index Property will resolve your issue

.myclass {   z-index:1; } 

for your problem have look : Layer on layer with z-index (Layers)

like image 33
Pranay Rana Avatar answered Sep 28 '22 03:09

Pranay Rana