Javascript 如何在CSS中将一个元素放置在另一个元素上

我想让circle元素覆盖另一个矩形背景，这样它看起来就像一个开关

这里是jsfiddle链接

---

只需将包含的白色直线位置设置为绝对位置

@charset "utf-8";
/* CSS Document */

#white_rect {
    position:absolute;
    height:52px;
    width:86px;
}

#circle {
    position:relative;
    height:50px;
    width:50px;
    transition:all 0.5s;
}

位置：相对是将孩子的绝对位置转换为自己的位置

因此，您的开关必须是：

position: relative;

position: absolute;

你的孩子必须：

position: relative;

position: absolute;

一切都很好 例如：

请。。。。请不要使用中心标签

写这个css

#white_rect {
    position:fixed;
    height:52px;
    width:86px;
}

---

在这里看到它的作用。也许你想要这个

---

改用jqueryui！如果我想使整个开关居中，该怎么办？使用margin:auto；给他一个宽度

// JavaScript Document
$(document).ready(function () {
    var toggle = false;
    $("#switch").click(function () {
        if (toggle) {
            toggle = false;
            $("#white_rect").attr("src", "http://abhaynayar.weebly.com/uploads/7/7/1/7/7717860/8033270_orig.png");
            $('#circle').animate({top: '0px', left: '-86px'}, 30);
        } else {
            toggle = true;
            $("#white_rect").attr("src", "http://abhaynayar.weebly.com/uploads/7/7/1/7/7717860/5257_orig.png");
            $('#circle').animate({top: '0px', left: '-56px'}, 30);
        }
    });
});