css div 위치

Question

나는 다 보았고 정답을 찾지 못하는 것 같습니다. 이 div는 모두 데이터베이스에서 동적으로 생성됩니다. 전의.

<div class="accordian_header"><div class="title"> any title </div></div> 
<div class="accordian_body"> 
    <div class="topleft"> info....</div> 
    <div class="topright"> info...</div> 
</div> 

는 지금은 클래스 "좌상"은 "accordian_body"사업부와 "topright는"오른쪽 상단에 있어야하는 왼쪽 상단에 있어야합니다. 문제는 내가 그 (것)들의 위치를 ​​지정하면 : 절대적으로 그들은 페이지의 오른쪽 상단으로 이동합니다. 다른 유형의 위치 지정을 선택하면 작동하지 않습니다.

"accordian_body"를 position : absolute로 설정하면 위로 향하게하고 topleft가 작동합니다. 문제는 내가 절대적으로 그렇게 할 수 없도록 동적으로 생성한다는 것이다. 그들은 서로의 일면에서 창조 될 필요가있다. 나는 "topleft"와 "topright"에서 float를 사용할 수 있다는 것을 알았습니다 : left, or right 그리고 그것이 작동하지만, 텍스트 나 이미지를 상단이나 하단에 넣고 싶다면 지금까지는 행운이 없습니다.

Answer 1

.accordion_body에 대한 position: relative을 설정하십시오. 그렇다면 절대적으로 배치 된 요소는 문서의 정상적인 흐름을 방해하지 않고 사용중인 조상이 아닌 컨테이너에주의를 기울입니다.

Answer 2

컨테이너를 relative으로 만들면 절대적으로 어린이를 배치 할 수 있습니다.

CSS

.accordian_body { 
    position: relative; 
} 
.topleft { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.topright { 
    position: absolute; 
    top: 0; 
    right: 0; 
}