부모좌표 기준으로 지역 위치 설정하기 css() 정렬 변경

css()메서드를 사용해서 부모좌표 기준으로 지역 위치를 설정할 수 있다.

$대상.css("left/top",값)
$대상.css({
	left:값,
    top:값
})

위치 값은 숫자 또는 문자열 모두 가능하며 숫자 값인 경우 jQuery 내부에서 자동으로 기본 단위인 "px"를 붙여서 처리한다.

 

정렬 버튼을 클릭하면 숫자가 대각선 모양으로 정렬 되도록

<script>
    $(document).ready(function() {
        $("#btnAlign").click(function(e) {
           var startX = 50;
           var startY = 50;

           $(".num").each(function(index){
            $(this).css({
                left:startX,
                top:startY
            })
            startX += 50;
            startY += 50;
           })
        });
    })
</script>



<button id="btnAlign">
     정렬
</button>
<div class="box">
    <div class="num"><p>1</p></div>
    <div class="num"><p>2</p></div>
    <div class="num"><p>3</p></div>
    <div class="num"><p>4</p></div>
    <div class="num"><p>5</p></div>
</div>