CODEWITHSUNDEEP
htmlcssz-index
user3216108
user3216108

Reputation: 59

Z-index issue which may be caused by my JS

On this page that was made with twitter bootstrap: (link removed)

I have a div that has a javascript running in it that prints lines of text as if someone is typing it onto the page. Let's call this div one. On top of this div, I have another div (let's call this div two) that has the title of my webpage.

I want div two to be on top of div one and they are. The issue is that the JS in div one that simulates someone typing pushes div two down. I want the divs to be on top of each other and the JS to run without pushing div two down.

The problem is, no matter how I use z-index, I can't seem to solve this problem. If I use absolute positioning, the div gets pushed on top of my menu buttons and I can't click them to use the webpage.

This is my div structure: 

<div class="container-fluid" style="height:80%; overflow:hidden;" id="panel1">
 <div class="type-wrap">
            <span id="typed" style="white-space:pre; font-size:20px; z-index:0; width:100%; overflow:hidden; font-size:30px;"></span>
        </div>

    <div class="site-wrapper" style="z-index:1;" >




      <div class="site-wrapper-inner" style="z-index:2;">

        <div class="cover-container" style="z-index:3;">

  <div class="inner cover" style="z-index:4">
          <center>  <h1 class="cover-heading" id="name" style="color:blue; z-index:1060;">Julie Seif
</h1>
            <p class="lead" id="tagline">Web Development & Design</p> 


            </center>
          </div>
</div>
</div>
</div>
</div>

Thanks so much for your help.

Upvotes: 0

Views: 68

Answers (1)

isherwood
isherwood

Reputation: 61083

#panel1 {
    position: relative; /* to contain absolute children, this must be positioned */
}
#typed {
    position: absolute;
}
.site-wrapper {
    position: relative; /* z-index only applies to positioned elements */
    z-index: 1;
}

Upvotes: 1

Related Questions