CODEWITHSUNDEEP
htmlcssz-index
Elaine McGovern
Elaine McGovern

Reputation: 269

HTML + CSS z-index not working

I have a very annoying problem which is my z-index is not working and the div is sitting above (on the y-axis) and not on top of (on the z-axis) the other div.

This will probably be completely obvious but I cannot see a problem with my code. Can anyone spot where I am going wrong? It should be so easy but I am getting so frustrated because I cannot find a solution. 

<style>
.greenleftarrow{
position: relative;
z-index:10;
display:block;
background:#fff url(./images/greenleftarrow.jpg) no-repeat;
left:10px;
top: 0px;
height:140px;
opacity:0.5;
filter:alpha(opacity=50);
}

</style>


<body id="body1" style="position: relative; z-index:-1; height: 510px;" onload="javascript:showAndroidToast('1'); inspectLang(); getDocHeight()">
<div class="greenleftarrow"  id="greenleftarrow" ></div>
<div  style="position: relative; z-index:-1;">body body body body</div>
</body>

Upvotes: 1

Views: 5719

Answers (2)

ramblex
ramblex

Reputation: 3057

If I understand correctly, you can use a negative top margin to move the second div upwards onto greenleftarrow:

http://jsfiddle.net/XSH2Y/

Upvotes: 1

Pedryk
Pedryk

Reputation: 1663

Try to change the position of the arrow to absolute.

  .greenleftarrow{
  position: absolute;
  z-index:10;
  display:block;
  background:#fff url(./images/greenleftarrow.jpg) no-repeat;
  left:10px;
  top: 0px;
  height:140px;
  opacity:0.5;
  filter:alpha(opacity=50);
  }

Upvotes: 5

Related Questions