CODEWITHSUNDEEP
htmlz-index
tris
tris

Reputation: 1049

HTML "bring to front" not using z-index

Is there a possiblility to bring a html element to front without increasing it's z-index? All elements having the same z-index overlap depending on there order in the DOM. I could remove the element and append it to it's parent again - but is there any nicer solution?

Edit:

Keeping an array of all rects, set all rect's z-index to x and the just hovered to x+1 does the trick, but needs an array.

Upvotes: 3

Views: 2724

Answers (2)

AliNajafZadeh
AliNajafZadeh

Reputation: 1328

try following code:

strong {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.DivStatic {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.DivAbsolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.DivRelative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#Main1 {
  top: 10px;
  left: 10px;
}

#Main2 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#Main3 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#Main4 {
  top: 10px;
  right: 10px;
}

#Main5 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
<div id="Main1" class="DivAbsolute">
  <strong>First DIV #1</strong><br />position: absolute;</div>
<div id="Main2" class="DivRelative">
  <strong>Second DIV #2</strong><br />position: relative;</div>
<div id="Main3" class="DivRelative">
  <strong>Third DIV #3</strong><br />position: relative;</div>
<div id="Main4" class="DivAbsolute">
  <strong>Fourth DIV #4</strong><br />position: absolute;</div>
<div id="Main5" class="DivStatic">
  <strong>Fifth DIV #5</strong><br />position: static;</div>

Upvotes: 1

dgund
dgund

Reputation: 3467

It would probably work if you wrote your HTML code from bottom positioning to top, since the browser reads the code from the top of the file to the bottom. Still, using z-index is a lot safer and more efficient.

Upvotes: 3

Related Questions