Javascript 偏移（）.左vs位置（）.左_Javascript_Jquery_Html_Css

Javascript 偏移（）.左vs位置（）.左

javascript jquery html css

Javascript 偏移（）.左vs位置（）.左,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望你能为我澄清一些事情我在研究旋转木马，发现了一个很好的，并在我的代码中复制了它作为参考，这是我看过的，它真的很好，很容易理解不管怎么说，我已经实现了，我想我应该自己做控制器，所以我抓取了一些图片，并将它们完全放在容器中的图片中（附上屏幕截图以供参考）让我们看看一些代码这是HTML结构。carouselWrapperdiv包含图像和控制器 <body>  <div class="carouselWrapper"

我希望你能为我澄清一些事情

我在研究旋转木马，发现了一个很好的，并在我的代码中复制了它

作为参考，这是我看过的，它真的很好，很容易理解

不管怎么说，我已经实现了，我想我应该自己做控制器，所以我抓取了一些图片，并将它们完全放在容器中的图片中（附上屏幕截图以供参考）

让我们看看一些代码

这是HTML结构。

carouselWrapper

div包含图像和控制器

<body>
<!-- carousel -->
<div class="carouselWrapper">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
<div class="sliderNav">
<button data-dir="prev" class="left transparent"></button>
<button data-dir="next" class="right transparent"></button>
</div>
</div>

<!-- end of carousel -->

</body>

下面是脚本中定位两个控制器的相关部分

同样，没什么特别的：我得到了所有需要的宽度和高度，然后更新了两个控制器的顶部和左侧值

/*positioning the controllers*/
    var containerWidth = $(".carouselWrapper").width();//get width of
    var containerHeight = $(".carouselWrapper").height();
    var controllerWidth = $(".sliderNav button").width();
    var controllerHeight = $(".sliderNav button").height();
    var $controllerPrev = $("button.left"); 
    var $controllerNext = $("button.right");
    var imageContainerPosLeft = $(".carouselWrapper").offset().left;
    var imageContainerPosTop = $(".carouselWrapper").position().top;
    var controllersTop = (containerHeight / 2) - controllerHeight;
    var controller1Left = imageContainerPosLeft;
    var controller2Left = (imageContainerPosLeft + containerWidth ) - controllerWidth ;
    //set the position of the two controller dynamically
    $controllerPrev.css({
        "top":controllersTop,
        "left":controller1Left      
    });
    $controllerNext.css({
        "top":controllersTop,
        "left":controller2Left
    });

    console.log("width of picture container is " + containerWidth + " controller width " + controllerWidth + " left pos is  "+ imageContainerPosLeft + " top pos is " + imageContainerPosTop + " container height " + containerHeight + " new controller top position: " +  controllersTop + " controller1 left pos is " + controller1Left + "second controller left pos is " + controller2Left + " controller height is " + controllerHeight);

我想提请大家注意这一点：

var-imageContainerPosLeft=$（“.carouselWrapper”）.offset（）.left
在这里，我使用的是offset（）
，它在每个浏览器中都能正常工作，但我的第一选择是position（）。左
当我使用position（）
时，我注意到只有Firefox、IE7和IE8以及opera工作正常。Safari、Chrome、IE9和10弄得一团糟，控制器被移到页面左侧
我运行了一些控制台日志，发现罪魁祸首实际上是position（）.left
，它返回的值为0，我预期的值为710px
因此，我将其替换为offset（）。左
，现在它在每个浏览器中都很好。现在，我查看了这两种方法的API，它说
.position（）方法允许我们检索元素相对于偏移父元素的当前位置
有趣的是，carouselWrapper
的父项是body标记，它没有声明明确的位置


因此，我的问题是：
1）这就是定位方法失败的原因吗？
2）如果是这样，为什么它只在某些浏览器中失败，而在其他浏览器中没有失败？我是说，即使IE7和IE8都做对了
3）作为替代方法，而不是使用offset（）.left
来解决问题，可以公平地说，我可以通过在body标签上添加位置：relative
来解决问题吗？可能的
/*positioning the controllers*/
    var containerWidth = $(".carouselWrapper").width();//get width of
    var containerHeight = $(".carouselWrapper").height();
    var controllerWidth = $(".sliderNav button").width();
    var controllerHeight = $(".sliderNav button").height();
    var $controllerPrev = $("button.left"); 
    var $controllerNext = $("button.right");
    var imageContainerPosLeft = $(".carouselWrapper").offset().left;
    var imageContainerPosTop = $(".carouselWrapper").position().top;
    var controllersTop = (containerHeight / 2) - controllerHeight;
    var controller1Left = imageContainerPosLeft;
    var controller2Left = (imageContainerPosLeft + containerWidth ) - controllerWidth ;
    //set the position of the two controller dynamically
    $controllerPrev.css({
        "top":controllersTop,
        "left":controller1Left      
    });
    $controllerNext.css({
        "top":controllersTop,
        "left":controller2Left
    });

    console.log("width of picture container is " + containerWidth + " controller width " + controllerWidth + " left pos is  "+ imageContainerPosLeft + " top pos is " + imageContainerPosTop + " container height " + containerHeight + " new controller top position: " +  controllersTop + " controller1 left pos is " + controller1Left + "second controller left pos is " + controller2Left + " controller height is " + controllerHeight);