css頂部不適用於嵌套的div

我有一個嵌套在容器div中的內容div。內容div有很多輸入元素。內容比容器大，溢出：隱藏。如果我通過輸入元素選項卡，它們會自動滾動到視圖中。但是，我不能以編程方式設置內容div頂部屬性，我需要做的（我只是想讓它回到'頂部'）。css頂部不適用於嵌套的div

http://jsfiddle.net/SwV9r/32/

如果你看的jsfiddle例如，通過元素片以滾動出現，然後點擊「重置」你會看到這是行不通的。爲什麼不？

HTML：

<head> 
<style> 
#wrapper{width:300px; height:300px; display:block; overflow:hidden; position:relative; z-index:1; border: 1px solid red; } 
#content{ width:1000px; height:1000px; vertical-align:top; z-index:1; display:block; position:absolute; border: 1px solid green;} 
#info{ height:100px} 
</style> 
</head> 
<body> 
    <div id="info"></div> 
<input id="test" type="button" value="Test"> 
<input id="reset" type="button" value="Reset"> 
<div id="wrapper"> 
<div id="content"> 
    1<input type="text"><br /> 2<input type="text"><br /> 3<input type="text"><br /> 4<input type="text"><br /> 5<input type="text"><br /> 6<input type="text"><br /> 7<input type="text"><br /> 8<input type="text"><br /> 9<input type="text"><br /> 10<input type="text"><br /> 11<input type="text"><br /> 12<input type="text"><br /> 13<input type="text"><br /> 14<input type="text"><br /> 15<input type="text"><br /> 16<input type="text"><br /> 17<input type="text"><br /> 18<input type="text"><br /> 
</div> 
</div> 
</body>

的Javascript：

$('#test').bind('click',report); 
$('#reset').bind('click',reset); 

function report(){ 
    var pos=$('#content').position(); 
    $('#info').html('pos.top='+pos.top); 
} 
function reset(){ 
    //$('#content').css("top","0px"); // Does not work 
    //$('#content').css('top',0); // Does not work 
    //$('#content').css('top','0px'); // Does not work 
    document.getElementById('content').style.top = '0px'; // Does not work 
    report(); 
}

來源

2011-07-29 Journeyman

不是向我們代碼粘貼到的jsfiddle嘗試，只需將其粘貼到自己，並分享鏈接的 - 應該讓更多的人來幫助你。 – Dave

@Dave - 謝謝，已完成 – Journeyman

我在此修復中發佈了您的代碼清理版本。 – ringerce

我覺得你.scrollTop後是：

$('#wrapper').scrollTop(0);

參見：http://jsfiddle.net/SwV9r/33/

的top CSS屬性無關與滾動偏移量。

來源

2011-07-29 14:49:34 thirtydot

太棒了 - 這確實有用。任何想法爲什麼其他方法不？ – Journeyman

因爲'top' CSS屬性在這裏是不相關的。您需要設置['scrollTop']（https://developer.mozilla.org/en/DOM/element.scrollTop）DOM屬性（查看該鏈接中的圖像），這就是jQuery的'.scrollTop'的作用。 – thirtydot

這個怎麼樣：

function reset(){ 
    $('#content').children('input').first().focus(); 
    report(); 
}

它將把重點放在第一輸入，所以它會跳回

來源

2011-07-29 14:40:55

感謝您的建議 - 我需要以編程方式返回div的最頂端，而不僅僅是第一個輸入元素。 – Journeyman

給一個鏡頭margin-top和position：relative而不是position：absolute和top。

這應該做的工作。

來源

2011-07-29 14:41:58 Yossi

我需要保持立場：絕對。我不明白爲什麼立場：絕對會阻止它回到頂端？ – Journeyman

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#wrapper{ width:300px; height:300px; border: 1px solid red; } 
#content{ width:300px; height:300px; overflow:auto; display:block; border: 1px solid green; } 
</style> 
<!-- Load jquery --> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1.4.2");</script> 
<script type="text/javascript"> 
$(function() { 
$('#reset').bind('click',resetit); 
}); 
function resetit(){ 
$("#content").scrollTop(0); 
} 
</script> 
</head> 

<body> 
<input id="reset" type="button" value="Reset"> 
<div id="wrapper"> 
<div id="content"> 
1<input type="text"><br /> 2<input type="text"><br /> 3<input type="text"><br /> 4<input type="text"><br /> 5<input type="text"><br /> 6<input type="text"><br /> 7<input type="text"><br /> 8<input type="text"><br /> 9<input type="text"><br /> 10<input type="text"><br /> 11<input type="text"><br /> 12<input type="text"><br /> 13<input type="text"><br /> 14<input type="text"><br /> 15<input type="text"><br /> 16<input type="text"><br /> 17<input type="text"><br /> 18<input type="text"><br /> 
</div> 
</div> 
</body> 
</html>

來源

2011-07-29 15:09:39 ringerce

css頂部不適用於嵌套的div

回答

相關問題