Question

我想让圆圈元素越过另一个矩形背景，这样它就像是一个开关。

#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/

请...请....不要使用CENTER-Tag !!!! 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

在Action Here中查看。可能你想要这个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);
        }
    });
});

如何在CSS中将元素定位在另一个元素上

5 个答案: