Question

我正在玩制作HTML / CSS轮播。

HTML：

<body>
    <div id="container">
        <div id="wrapper">
            <div id="d1" class="box"><p>DIV#1</p></div>
            <div id="d2" class="box"><p>DIV#2</p></div>
            <div id="d3" class="box"><p>DIV#3</p></div>
            <div id="d4" class="box"><p>DIV#4</p></div>
        </div>
    </div>
</body>

CSS：

.box {
    height: 100px;
    width: 100px;
    margin: 15px;
    border: 2px solid black;
    color: black;
    float: left;
}

#container {
    width: 150px;
    height: 144px;
    overflow: hidden;
    border: 2px solid black;
}

#wrapper {
    height: 140px;
    width: 555px;
    border: 2px solid green;
    position: relative;
    left: 0px;
}

#d1 {
    background-color: blue;
}

#d2 {
    background-color: red;
}

#d3 {
    background-color: green;
}

#d4 {
    background-color: yellow;
}

这是小提琴：http://jsfiddle.net/97jhB/ 我打算稍后为左/右按钮添加javascript控件和配置首先，我只是想从概念上学习它的工作原理。

我试图通过玩包装的left来获得旋转木马'效果'。
如果我继续减少包装器的left，我将能够连续看到这些盒子。

我有几个问题：

如果我没有将包装器的position设置为relative，则对其left所做的更改不会生效。为什么会这样？默认情况下包装器不应该是relative吗？
如果我使用包装器的margin-left代替left，它似乎可以正常工作。
这两种方法之间有什么好处：玩left或玩margin-left？

Answer 1

因为只有relative，absolute和fixed定位使用left，right，top和bottom来定义他们相对于他们所处当前环境的位置。

固定是相对于视口，绝对是从正常页面流中取出的，相对于第一个设置了CSS位置的父节点，而relative是relative to the nearest block-level ancestor。

static是默认位置，使用margin-left，margin-right等将元素相对于页面流中的其他元素定位在最近的块级祖先中。

另外，请注意位置：已修复在older mobile devices上无效。

MDN对此主题有great documentation。

Answer 2

当您将 position:relative CSS声明分配给div时，您实际上并没有移动它在页面上占用的空间，就在它的位置显示。

但是，如果没有明确指定，默认位置为static，对于任何html元素。

position: static;

在SO上查看此链接，以获得 margin-left v / s left 差异的完整说明

Difference between margin-left and left

Answer 3

静态是默认值，最好的办法是让包装器relative和项absolute，这样溢出的项目就不会到底（~win不创建新行...如果您想要遵循此路径，则必须删除float:left。
最好使用左（或右边如果RTL），如果你想在旋转木马滑动之间留一些余量，想一想你有多个可见项目的场景。

左v / s margin-left和CSS：position

3 个答案: