Как сделать элемент из диапазона его родителя?

Question

Мой HTML:

  <div id="main">
    <div id="inner_div"></div>
  </div>  

CSS:

  #main{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    margin: 10px auto;
    position: relative;
  }
  #inner_div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
}  

Как видите, теперь #main будет центрироваться на странице, я не могу изменить стиль #главный.Я могу изменить стиль #inner_div, я хочу сделать его слева от страницы, поэтому я изменяю CSS на:

 #inner_div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    z-index: 2012;
    position: absolute;
    left: 10px;
    top: 10px;
 }  

Но #inner_div все еще находится в диапазоне #main:

Мой вопрос: как я могу изменить CSS #inner_div, но не #main, чтобы #inner_div нарушил границы #main?Скрипка: http://jsfiddle.net/9EYP6/1/

Answer 1

Использовать отрицательные параметры позиционирования, например,

left: -10px;
top: -10px;

Answer 2

@ wong2;возможно, вам придется дать positon отрицательно