由于某些原因，我的左侧位置没有正确定位

My left position is for some reason not positioning right

本文关键字：位置 定位 于某些 我的      更新时间：2023-09-26

我制作了一个背景，在两个相邻的div中有两个图像，它们使用javascript在屏幕上移动。我最初是为了处理宽度为2000px的div，因此第二个div位于左侧2000px。我现在做了一个@media功能，这样它就可以适应屏幕大小。

样式表正在正确加载@media，我已经对它进行了测试，对它应用了边框，以显示它在屏幕大小上工作。Javascript正在运行，我已经测试过了。但是它在css中的左侧位置不会改变第二个div的起始位置，并且总是有一个间隙。

这是css的一部分：

@media (min-device-width: 800px) and (max-device-width: 1099px) {
#rotsky {position: fixed; bottom: 0px; width: 1400px; background: url('images/skybkm.jpg') no-repeat left bottom}
#rotsky2 {position: fixed; left: 1400px; bottom: 0px; width: 1400px; background: url('images/skybk2m.jpg') no-repeat left bottom}
}
#rotsky {left: 0px; height: 100%; z-index: -2}
#rotsky2 {height: 100%; z-index: -2}

这是JS

function applywidth() {
    var screenwidth = getWidth();
    if (screenwidth <= "799") {
        skywidth = "1000";
    } else if (screenwidth >= "800" && screenwidth <= "1099") {
        skywidth = "1400";
    } else if (screenwidth >= "1100") {
        skywidth = "2000";
    }
}
function rotate() {
    newleft-=1.1;
    nawleft-=1.1;
    if (nawleft <= (0-skywidth)) {
        nawleft = skywidth;
    }
    if (newleft <= (0-skywidth)) {
        newleft = skywidth;
    }
    var nowleft = newleft + "px";
    var nuwleft = nawleft + "px";
    document.getElementById('rotsky').style.left=nowleft;
    document.getElementById('rotsky2').style.left=nuwleft;
}

其余部分可以在上看到

http://jsfiddle.net/UkxLL

问题出在定位上，我把所有东西都改成了：

position: absolute;

并添加了其他一些twinks。看看jsfiddle。这是你想要的吗？

PS：下次确保你的jsfiddle工作。。。我不得不增加div的高度，因为小提琴将其设置为0px，因此没有显示任何内容。

编辑：我把第二张图片上的样式改成了这个：

#rotsky2 {
    margin-left: -10px; 
    position: absolute; 
    top: 0; 
    height: 1000px; 
    z-index: -5; 
    left: 0;
}

再次查看jsfiddle，如果它不起作用，请告诉我你在使用什么浏览器。：）

我找到了一个非常好的解决方案。我不是移动div，而是将其中的图像作为背景位置进行移动。我现在已经将左边设置为永远不会移动，这太棒了。x

相关文章：