CODEWITHSUNDEEP
htmlcssz-indexbringtofront
user7651290
user7651290

Reputation: 1

How do I get my "Dunedin" Div to move to front?

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; 
}

Upvotes: 0

Views: 27

Answers (3)

Lakshman Kambam
Lakshman Kambam

Reputation: 1618

#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>

Upvotes: 0

andrepaulo
andrepaulo

Reputation: 816

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>

Upvotes: 1

praveena
praveena

Reputation: 222

give positive value for z-index, eg:

#dunedin {font-size: 200px; text-align: center; position: relative; z-index: 100; }

Upvotes: 0

Related Questions