CODEWITHSUNDEEP
htmlcsspositioning
Codi Leigh
Codi Leigh

Reputation: 15

Absolutely positioned div is not recognizing parent div

I have a very specific issue with the site I'm working on. I have a JQuery-animated thermometer on the bottom of the site. If your browser size is smaller than the height of the thermometer, something in the positioning causes it to scroll above the position:fixed; navigation bar. You can see the issue here, if your browser window is small.

Here is my CSS for the Thermometer.

.thermo1 {
    position: relative;
}

.thermometer {
    float: left;
    position:relative;
    margin-left:460px;
    margin-top:-550px;
}
.thermometer {
    width:50px;
    height:550px;
    position: relative;
    background: #302720;
    border:0px solid #aaa;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.thermometer .track {
     height:530px;
     top:10px;
     width:40px;
     border: 1px solid #302720;
     -webkit-border-radius: 18px;
     -moz-border-radius: 18px;
     -ms-border-radius: 18px;
     -o-border-radius: 18px;
     border-radius: 18px;
     position: relative;
     margin:0 auto;
     background: rgb(255, 255, 255);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(94, 75, 62)), color-stop(1%, rgb(255, 255, 255)));
     background: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -o-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -ms-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -moz-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background-position: 0 -1px;
     background-size: 100% 5%;
}   
.thermometer .progress {
     height:0%;
     width:100%;
     border-bottom: 0px solid rgb(143, 24, 67);
     -webkit-border-radius: 8px;
     -moz-border-radius: 12px;
     -ms-border-radius: 12px;
     -o-border-radius: 12px;
     border-radius: 12px;
     background: rgb(143, 24, 67);
     background: rgba(143, 24, 67, 0.9);
     position: absolute;
     bottom:0;
     left:0;
}
.thermometer .goal {
     position:absolute;
     top:0;
}
.thermometer .amount {
     display: inline-block;
     padding:0 5px 0 50px;
     border-top:1px solid black;
     font-family: Trebuchet MS;
     font-weight: bold;
     color:#302720;
}
.thermometer .progress .amount {
     padding:0 50px 0 5px;
     position: absolute;
     border-top:1px solid #302720;
     color:#302720;
     right:0;
}

And my HTML

<div id="thermo1" class="thermometer">
    <div class="track">
        <div class="goal">
            <div class="amount">25000</div>
        </div>
        <div class="progress">
            <div class="amount">0</div>
        </div>
    </div>
</div>

If you can shed some light on this, I'd be so grateful. Thanks!

Upvotes: 0

Views: 101

Answers (2)

CRABOLO
CRABOLO

Reputation: 8793

The issue is with your margin-top of -550px. Change it to 0px and it works great.

.thermometer {
    float: left;
    position:relative;
    margin-left:460px;
    margin-top:-550px; //change this to 0px
}

http://jsfiddle.net/nFzPM/

Upvotes: 0

Gajanan
Gajanan

Reputation: 140

Add higher z-index for .single-page-nav then other elements in the site .

.single-page-nav {
  z-index:100000;
}

Hope this helps .

Upvotes: 1

Related Questions