0

I've tried applying z-index: -1 but nothing will seem to work:

HTML:

<div id="dunedin">
    Dunedin
</div>

CSS:

#dunedin {
    font-size: 200px; text-align: center;
    position: relative;
    z-index: -1; 
}
M Hamza Javed
  • 1,269
  • 4
  • 17
  • 31
user7651290
  • 1
  • 1
  • 1
    compared to what? – andrepaulo Mar 03 '17 at 04:44
  • 1
    http://stackoverflow.com/help/on-topic *Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve).* – Michael Coker Mar 03 '17 at 04:52

3 Answers3

1

z-index works like layers, the bigger the number you put the toppest that object will be shown.

As you can see in this example, even the red being normally overlapped by green because of the document flow and size. Once we put z-index value higher, the red will shown at the top of the green div.

.a {
  position:absolute;
  width:300px;
  height:200px;
  background:red;
  z-index:1;
}


.b {
  position:absolute;
  width:400px;
  height:300px;
  background:green;
  z-index:0;
}
<div class="a"></div>
<div class="b"></div>
andrepaulo
  • 816
  • 11
  • 24
0

give positive value for z-index, eg:

#dunedin {font-size: 200px; text-align: center; position: relative; z-index: 100; }
praveena
  • 222
  • 3
  • 6
0

#dunedin1{
width:200px; 
height:200px;
float:left;
background-color:red;
text-align:center;
z-index:-2;
position:relative;
}
#dunedin2{
width:200px; 
height:200px;
float:left;
background-color:green;
text-align:center;
z-index:0;
position:relative;
}

#dunedin3{
width:100%; 
height:50px;
position:absolute;
top:60px;
left:60px;
background-color:blue;
text-align:center;
z-index:-1;
}
<div id="dunedin1">
Dunedin
</div>
<div id="dunedin2">
Dunedin
</div>
<div id="dunedin3">
Dunedin
</div>
Lakshman Kambam
  • 1,498
  • 13
  • 20