CSS - margin-left, top alternatives

Question

DOM의 모든 요소를 ​​배치하려면 margin-left, margin-top : px를 사용합니다. 다른 대안이 있습니까? 동일한 것을 사용하는 것이 좋습니다.

Answer 1

일반적으로 DOM 내부에 요소를 배치하기 위해 position:relative; 및/또는 position:absolute;이 사용됩니다.

요소에 position:absolute;을 설정하면 문서의 위, 오른쪽, 아래쪽에 왼쪽 속성으로 위치가 설정됩니다. 다른 요소의 위치를 ​​설정하려면

, 당신은 내가 생각하는 position:relative;에 부모 요소를 설정하여 일반적인 시나리오

예를 들어

입니다 margin-top:20px; margin-left:20px;에 대한 대안은 다음과 같습니다

<div id="outer"> 
    <div id="inner"> 
    </div> 
</div> 
<style> 
#outer { position:relative; } 
#inner { position:absolute; top:20px; left:20px; } 
</style> 

이러한 속성을 사용하는 것은 약간 까다 롭지 만 유연성이 뛰어납니다. 자세한 내용은 here을 참조하십시오.