如何使CSS元素超出包含div的所有边界？

Question

I have a JS Fiddle going of something that I am trying to do here. As you can see I have a circle sitting in the center of a div. When you run the script it expends evenly in all directions until it hits the left and top of the screen. What I want to happen is the circle to expand evenly in all directions (through all of the containing divs borders) so that it fills the screen with red, but I am at a loss on how to get it to overflow left and top.

here is the fiddle:

http://jsfiddle.net/dkarasinski/UxtJV/711/

HTML

<div class="outerwrapper">
    <div class="test">
        <div class="circle"></div>
    </div>
</div>

jquery

$(document).ready(function() {
setTimeout(function() {
$('.circle').addClass('open');
}, 2000);
});

Any help would be appreciated!

Answer 1

I think it's more to do with your top and left absolute on the .open css class style.

Here's a fork of your fiddle with -200px on both top and left: http://jsfiddle.net/ghopkins/3eybkrz1/

Change in code:

div.open {
 top: -200px;
 left: -200px;
 width: 1000px;
 height: 1000px; 
}

Your version is pinning the top left 'corner' of the circle and expanding down and right.

Answer 2

You're explicitly putting the <div> at (0, 0) on the page.

Instead of trying to figure out the position, you can just take advantage of the transform property:

div.open {
    transform: scale(50, 50);
}

That makes the circle 50 times bigger in both the X and Y axes. The element won't change position; it'll just get bigger.

Answer 3

you can use this

transform: translate(-25%, -25%);

demo - http://jsfiddle.net/UxtJV/714/