block element 들을 상위 객체를 기준으로 상대위치 지정하는 방법

일단 예제로 말하자.
이곳을 봐도 된다.
실제로 보고 고쳐보면서 이해하도록 하자.
요약하면
<부모>
  <자식>
  </자식>
</부모>
형태일때 "부모"가 relative 여야 자식의 위치를 부모 기준으로 지정할 수 있다.
단 이경우 "자식"은 absolute 여야함.
<style>
ul,li,img {
    padding: 0;
    margin: 0;
}
li {
    list-style-type: none;
}
li#container {
    position:relative;
}
li#fail {
    position:static;
}
#parent {
    background-color:#eef;
    width:100px;
    height:50px;
}
#child {
    background-color:#fee;
    width:50;
    height:20px;
    left: 10px;
    top: 10px;
    position: absolute;
}
</style>
<h3>
  Block Object 에서 상대위치 정하는 법  
</h5>
<h3>
  망한 방법
</h3>
<ul>
  <li id="fail">
    <ul>
      <li id="parent">
        Parent
      <li>
      <li id="child">
        nono
      </li>
    </ul>
  </li>
</ul>
<h3>
  parent가 relative면서 child는 absolute로 지정하면 success
</h3>
<ul>
  <li id="container">
    <ul>
      <li id="parent">
        Parent
      <li>
      <li id="child">
        nono
      </li>
    </ul>
  </li>
</ul>

덧글

댓글 입력 영역