절대적이지만 부모에 상대적인 위치

다른 div 안에 두 개의 div가 있고 하나의 자식 div를 부모 div의 오른쪽 상단에 배치하고 다른 자식 div를 CSS를 사용하여 부모 div의 하단에 배치하고 싶습니다. 즉, 두 개의 자식 div와 함께 절대 위치를 사용하고 싶지만 페이지가 아닌 부모 div를 기준으로 배치하십시오. 어떻게해야합니까?

샘플 HTML :

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

이 작품 때문에 position: absolute같은 수단 일 "사용은 top, right, bottom, left가 가장 가까운 조상과 관련하여 자신의 위치를하는 position: absolute나 position: relative."

우리가 만드는 그래서 #father이 position: relative, 아이들이 가지고 position: absolute다음, 사용 top및 bottom아이들의 위치를.

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

누군가가 부모 아래에 자식 div를 직접 배치하려고하는 경우

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

데모 근무 Codepen

부모에게 입장을주지 않으면 기본적으로가 걸립니다 static. 그 차이점을 이해하려면이 예제를 참조하십시오

예 1 ::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

여기서 부모 클래스는 위치가 없으므로 요소가 본문에 따라 배치됩니다.

예 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

이 예에서 부모는 상대 위치를 가지므로 요소는 상대 부모 내부에 절대 위치로 배치됩니다.