Javascript 以下哪种不同的实现更好？

我正在尝试找出更好的方法，我正在谈论CSS部分，以创建一个水平内容滑块。当然，最好使用jQueryUI或任何其他内容滑块，所以我只是好奇如何更好地实现内容滑块。您可以在下面看到我的几种解决方案

HTML:

})

CSS，第一个变体：

    .wrapper {
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px black solid;
        overflow: hidden;
    }
    .items {
        position: absolute; /*here is the difference*/
        width: 2000px;
    }
    .item {
        margin: 5px;
        display: inline-block;
        border: 1px solid red;
        width: 150px;
        text-align: center;
        font-size: 160px;
    }

CSS，第二种变体：

        .wrapper {
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px black solid;
        overflow: hidden;
    }
    .items {
        position: inherit;
        width: 2000px;
    }
    .item {
        margin: 5px;
        display: inline-block;
        border: 1px solid red;
        width: 150px;
        text-align: center;
        font-size: 160px;
    }

问题是使用什么更好：相对+继承还是相对+绝对

==和另一个非常类似的实现：==

HTML:

})

CSS:

在这里，我不使用任何相对\绝对属性，但我尝试移动左边距，而不是左属性。 所以问题是什么解决方案更好

================================================ 小提琴：

---

我不能发布超过3个链接，所以第三个变体的提琴在这里：http://jsfiddle.net/TGEQf/

更好的解决方案是使用变换，而不是在使用变换更改幻灯片时设置左/右动画。转换可以很容易地通过硬件加速，与左属性和顶部属性不同，更改它们不会导致回流，并且可以完全在GPU中完成，即使不重新绘制，因此它们具有更好的性能。

我完全同意您关于转换的看法，但我只讨论这个示例位置、左属性和边距属性。

    .wrapper {
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px black solid;
        overflow: hidden;
    }
    .items {
        position: absolute; /*here is the difference*/
        width: 2000px;
    }
    .item {
        margin: 5px;
        display: inline-block;
        border: 1px solid red;
        width: 150px;
        text-align: center;
        font-size: 160px;
    }

        .wrapper {
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px black solid;
        overflow: hidden;
    }
    .items {
        position: inherit;
        width: 2000px;
    }
    .item {
        margin: 5px;
        display: inline-block;
        border: 1px solid red;
        width: 150px;
        text-align: center;
        font-size: 160px;
    }

<div class="scrollableContainer">
<div class="content">
    <div class="scrollableContent">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>
</div>
<div class="slider"></div>

$(function() {
$( ".slider" ).slider({
    slide: function( event, ui ) {
        $('.console').text(ui.value);
        $('.scrollableContent').css('margin-left', -ui.value * 4);
    }
});

.scrollableContainer {
width: 500px;
height: 200px;
}
.scrollableContainer .content {
    border: 2px solid #999;
    border-radius: 5px;
    height: 100px;
    width: 500px;
    overflow: hidden;
}
.scrollableContainer .scrollableContent {
    font-size: 30px;
    margin-left: 0px;
    width: 1000px;
}
.scrollableContainer .scrollableContent .item {
    font-size: 50px;
    font-weight: bold;
    border: 5px solid grey;
    border-radius: 5px;
    width: 70px;
    height: 70px;
    margin: 10px;
    text-align: center;
    float: left;
}
.scrollableContainer .slider {
    width: 300px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* overridings for jquery UI styles: */
.scrollableContainer .slider .ui-slider-handle.ui-state-default.ui-corner-all {
    border: 4px solid #999;
    border-radius: 50%;
    cursor: pointer;
}

.scrollableContainer .slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content {
    background: #ddd;
}