専門家の皆様、_html/css_WEB-ITnose を実行するとコードが間違ってしまうのはなぜですか-htmlチュートリアル-php.cn

専門家の皆様、_html/css_WEB-ITnose を実行するとコードが間違ってしまうのはなぜですか

WBOY

リリース： 2016-06-24 11:33:52

オリジナル

835 人が閲覧しました

rreee

エフェクトはこのようになりますが、頭と下を追加すると、両側のスクロールの上の高さの間に常に距離が発生します。この距離を削除したいと思います。下部は自動的に上部の下にジャンプします。

ディスカッションに返信 (解決策)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.top{    width:1200px;    height:150px;    background:#000;    margin-bottom: 10px; } .left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{    float:left;    width:880px;    height:1800px ;    background:#FF0000;    margin-right: 10px;    margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; } .bot{    width:1200px;    height:150px;    margin-top: 10px;    background-color: #00F; } </style></head><body><div id="wrap"> <div class="top"> </div>  <div class="left" id="left" > </div> <div id="center">  <p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p> </div> <div class="right" id="right"> </div>  <div class="bot"> </div> </div><script>var min_scroll=30;///触发效果的滚动条top值,$(document).scroll(function(){          if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style'))    {           var right={'top':$('#right').offset().top,'left':$('#right').offset().left};        var left={'top':$('#left').offset().top,'left':$('#left').offset().left};        var center={'left':$('#center').position().left}        $('#center').css({'position':'absolute','left':center.left});        $('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left});        $('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left});    }    if($(this).scrollTop()<min_scroll&&$('#left').attr('style'))    {        $('#left').removeAttr('style');        $('#right').removeAttr('style');        $('#center').removeAttr('style');    }      });</script> </body></html>

ログイン後にコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.top{    width:1200px;    height:150px;    background:#000;    margin-bottom: 10px; }  .left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{    float:left;    width:880px;    height:1800px ;    background:#FF0000;    margin-right: 10px;    margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; } .bot{      float:left;    width:1200px;    height:150px;    margin-top: 10px;    background-color: #00F; }  </style></head><body><div id="wrap"> <div class="top"> </div>   <div class="left" id="left" > </div> <div id="center">  <p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p><p>center8</p><p>center9</p><p>center10</p> </div> <div class="right" id="right"> </div>  <div class="bot" id="bot"> </div>  </div><script>var min_scroll=30;///触发效果的滚动条top值,$(document).scroll(function(){           if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style'))    {           var right={'top':0,'left':$('#right').offset().left};        var left={'top':0,'left':$('#left').offset().left};        var center={'left':$('#center').position().left}        var bot={'top':0,'left':$('#bot').offset().left}        $('#bot').css({'position':'fixed','left':bot.left,'top':bot.top,'margin':0});        $('#center').css({'position':'absolute','left':center.left});        $('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left});        $('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left});    }    if($(this).scrollTop()<min_scroll&&$('#left').attr('style'))    {        $('#left').removeAttr('style');        $('#bot').removeAttr('style');        $('#right').removeAttr('style');        $('#center').removeAttr('style');    }       });</script>  </body></html>

ログイン後にコピー

BOT一番下にはまだCENTERファイルがアップロードされます

どれをしたいですかスタックは z-index で表されます。大きいほど上位に表示されます。

どれを重ねますか? Z-index は、大きいほど上位に表示されます。重ねて一番下に表示させていただきますのでよろしくお願いします