CODEWITHSUNDEEP
htmlcss
Jordan
Jordan

Reputation: 61

CSS - Div z-index being ignored

I have a div with a higher z-index than the div before, however, the div with the higher z-index is going behind the div before it.

$(document).ready(function(){
  $("#menu-button").click(function(){
    $("#menu").show(1000, function() {
      $("#option1").show(1500, function() {
        $("#option2").show(1500, function() {
          $("#option3").show(1500, function() {
            $(":not(#menu)").click(function(){
              $("#menu").hide(100);
            });
          });
        }); 
      });
    });
  });
});
html, body{ height:100%; width:100%; padding:0; margin:0; overflow-x: hidden;}
#body{background:#333333; height: 100%; z-index:-5;}
#rotate{transform: rotate(5deg); background:#666; width:100%; height: 100%; position:absolute;}
.hidden{
  display: none;
}
.mobMenu{
  height:100%;
  width:35%;
  background:#006666;
}
.btn{
  background:#039;
}
.page{
  border:0;
  padding:0;
  width:100%;
  z-index:3;
  float: left;
  height: 100%;
}
<body id="body">
  <div id="rotate"></div>
  <div class="page">
    <span id="menu-button" style="color:#FFF;">TEST</span>
    <div class="mobMenu hidden" id="menu">
      <button class="hidden" id="option1">1</button>
      <button class="hidden" id="option2">2</button>
      <button class="hidden" id="option3">3</button>
    </div>
  </div>
</body>

I would assume that the div "rotate" would be behind the div "page" however, this seems to not be the case.

I would like to use the rotated div as a background, and have it so that when the user scrolls it doesn't take remove the rotated box background.

(the script at the top is just in case, for any reason, that affects anything)

Upvotes: 1

Views: 2493

Answers (4)

Souban.AB
Souban.AB

Reputation: 23

Just change the z-index of #page to 0 and #rotate to -1.

#rotate { z-index: -1; } 

#page { z-index: 0; }

Upvotes: 0

Darren Gourley
Darren Gourley

Reputation: 1808

I've updated the following CSS:

#body{background:#333333; height: 100%; }
#rotate{transform: rotate(5deg); background:#666; width:100%; height: 100%; position:absolute; z-index:1}
.page{
    position:relative;
    border:0;
    padding:0;
    width:100%;
    z-index:2;
    float: left;
    height: 100%;
}

Removed z-index from body, added z-index:1; to #rotate, changed .page z-index:2

https://jsfiddle.net/ogvopvxs/

Upvotes: 0

Doug McLean
Doug McLean

Reputation: 1309

From http://www.w3schools.com/cssref/pr_pos_z-index.asp:

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Your .page isn't "positioned".

Also, you don't appear to have a z-index specifically set on #rotate. You might not need it, but I'd recommend giving it a z-index of 2 or lower.

Any reason you felt you needed a z-index of -5 on #body?

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241078

As stated in the visual formatting model documentation, the z-index property only applies to positioned elements. In your case, the .page element has a default position value of static, which means that the z-index will not affect the element.

If you position the element, by changing the position value to relative/absolute/fixed, then it will work as expected.

.page {
    border: 0;
    padding: 0;
    width: 100%;
    float: left;
    height: 100%;
    z-index: 3;
    position: relative; /* Added. */
}

Upvotes: 3

Related Questions