Css固定div区 [英] Css fixed div area

问题描述

你好大家我有固定的div区域。我把这些固定的div在一个div，我叫page这里是css：

Hello everyone I have fixed div area. I put these fixed divs in a one div which I call "page" here is 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区域远离我pagediv

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

这里是固定的div css：

and here is fixed 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;
}

推荐答案

但是当我检查我的设计与不同的分辨率固定div区域远离我的页面div。

这是因为，当你将元素的位置设置为fixed，其位置是相对于屏幕计算的，在这种情况下，元素将始终位于： top：244px; left：5.4％; 和 top：385px; left：70px; 。

this is because when you set an element's position as fixed, its position is calculated relative to the screen, in your case, the elements would always be positioned at:top:244px; left: 5.4%; and top:385px; left:70px; from the screen.

我的建议是绝对定位（使用 position：absolute; ）然后检测如果查看器屏幕的宽度大于文档的宽度（在这种情况下，为964像素），如果是，则将火箭的位置更改为 position：fixed;

My suggestion would be to position them absolutely (using position:absolute;) and then detect (using JavaScript) if the width of the viewer's screen is greater than your document's width (in your case, that would be 964px), and if it is, then change the position of rockets to position:fixed;

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

here is jQuery code for my suggestion above:

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

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

and here is the css you should use (as posted by 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 */
}

这篇关于Css固定div区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！