jQuery滾動z-index問題與位置：固定

Question

我正在處理父div的寬度爲100％的佈局&窗口大小的高度。

它的子div有固定尺寸說：400像素溢出：自動，因爲我想顯示滾動條。

這個孩子div有一個元素，我想添加位置：固定在滾動事件。

我的問題是，每當我想補充的位置是：固定使用jQuery

滾動事件的孩子DIV中的元素之一，它彈出出孩子的div甚至是孩子div有較高的z-index &溢出：汽車

這裏工作Code & Fiddle

什麼是這裏的問題？需要解決什麼？

的Html

<div id="wrapper"> 
    <div id="content"> 
     <p id="head">Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
    </div> 
</div> 

CSS

body, html { 
    height: 100% 
} 
#wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #bbb; 
    z-index: 999 
} 
#content { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    overflow: auto; 
    background: #eee; 
    z-index: 99 
} 
p { 
    width: 100%; 
    padding: 40px; 
} 
#head { 
    background: green 
} 
.fixed { 
    position: fixed; 
} 

JS

$("#content").scroll(function() { 
    if($(this).scrollTop() > 0) { 
     $('#head').addClass('fixed'); 
    } else { 
     $('#head').removeClass('fixed'); 
    }   
}); 

Answer 1

固定位置總是相對於視口，以便100％的寬度已應用到它總是去做。

你可以申請寬度繼承於固定元素，並且做的伎倆在一些瀏覽器，但既然你也有填充元素的父寬度不會做的伎倆要麼

你將不得不硬編碼的寬度320像素在這種情況下，或JavaScript解決方案

Answer 2

Please set 

.fixed { 
    position: fixed; 
z-index: 0; 
} 

Answer 3

你可以玩這個的p元素，如果幫助：http://jsfiddle.net/nWH3S/3/

$("#content").scroll(function() { 
    if ($(this).scrollTop() > 0) { 

    $('#head').addClass('fixed').css({ 
     width: $("#content").innerWidth()-20+"px" 
    }); 
    } else { 
    $('#head').removeClass('fixed').css({ 
     width: $(this).width() 
    }); 
    } 
}); 

和小提琴。

和這一個需要修復這樣的：

p { 
    width: 100%; 
    padding: 40px 0;// just made the padding for top bottom. 
    margin:0; 
}