0

大家好，我有固定的 div 区域。我将这些固定的 div 放在一个 div 中，我称之为“页面”，这里是 css：

.page {
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

但是当我用不同分辨率检查我的设计时，固定 div 区域远离我的“页面”div

这是固定的div css：

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position:fixed;
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position:fixed;
}
4

2 回答 2

1

我认为你的意思是让火箭相对于页面而不是浏览器文档定位。在这种情况下，只需更改定位指令：

.page {
    position: relative; /* Position context for the rockets */
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position: absolute; /* Absolute positionning within the page */
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position: absolute; /* Absolute positionning within the page */
}
于 2012-10-30T08:37:26.097 回答
1

"But when I check my design with different resolution fixed div area go far from my "page" div".

这是因为当您将元素的位置设置为固定时，它的位置是相对于屏幕计算的，在您的情况下，元素将始终定位在：top:244px; left: 5.4%;和top:385px; left:70px;屏幕上。

我的建议是绝对定位它们（​​使用position:absolute;），然后检测（使用 JavaScript）查看器屏幕的宽度是否大于文档的宽度（在您的情况下为 964px），如果是，则更改火箭的位置position:fixed;

这是我上面建议的 jQuery 代码：

<script type="text/javascript">
    $(document).ready(function(){
        if($(window).width()>=964){
            $('#rocket_left').css('position','fixed');
            $('#rocket_left').css('position','fixed');
        }
    });
</script>

这是您应该使用的 css（由 MarvinLabs 发布）：

.page {
    position: relative; /* Position context for the rockets */
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position: absolute; /* Absolute positionning within the page */
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position: absolute; /* Absolute positionning within the page */
}
于 2012-10-30T09:20:39.150 回答