CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abhay Nayar
Abhay Nayar

Reputation: 87

How to positioning an element over another in CSS

I want to make the circle element go over the other rectangular background so that it seems like it is a switch.

Here is the jsfiddle link http://jsfiddle.net/UHb8R/

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

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

Upvotes: 1

Views: 86

Answers (5)

Himanshu Joshi
Himanshu Joshi

Reputation: 3399

See it in Action Here. May be you want this 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);
        }
    });
});

Upvotes: 0

SeeTheC
SeeTheC

Reputation: 1631

Write this css

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

Upvotes: 0

Manuel Richarz
Manuel Richarz

Reputation: 1926

position: relative is translating your child's absolute position to itself.

so your switch have to be:

position: relative;

and your childs have to be:

position: absolute;

and everything is fine. :) as example: http://jsfiddle.net/Valtos/UHb8R/3/

and please.... please.... DONT USE CENTER-Tag!!!! http://www.w3.org/wiki/HTML/Elements/center

Upvotes: 1

Evgeniy
Evgeniy

Reputation: 2921

#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;
}

Upvotes: 0

hutchonoid
hutchonoid

Reputation: 33306

Simply make the containing #white_rect position absolute.

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

Upvotes: 1

Related Questions