如何在CSS中將元素放置在另一個元素上

Question

我想使圓形元素越過其他矩形背景，以便看起來像是一個開關。

這是jsfiddle鏈接http://jsfiddle.net/UHb8R/

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

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

Answer 1

只需將包含的#white_rect位置設為絕對。

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

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

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

http://jsfiddle.net/UHb8R/7/

Answer 2

位置：相對是將您孩子的絕對位置轉化為自身。

因此您的開關必須是：

position: relative;

您的孩子必須是：

position: absolute;

一切都很好。 :)例如： http : //jsfiddle.net/Valtos/UHb8R/3/

並請....請....不要使用中心標簽！ http://www.w3.org/wiki/HTML/Elements/center

Answer 3

#switch{
    position: relative;
    width:86px;
}

#white_rect {
    position:relative;
    height:100%;
    width:100%;
}

#circle {
    position:absolute;
    height:50px;
    width:50px;
    transition:all 0.5s;
    left:0;
}

Answer 4

寫這個CSS

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

Answer 5

在此處操作中查看。 可能是您想要這個http://jsfiddle.net/UHb8R/12/

// 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);
        }
    });
});