예) body태그(최상위) - div태그(img태그 상위) - img태그
- ⭐body태그 안에 div가 position이 'absolute' 또는 'relative'이면 img태그는 div태그가 기준이 된다
- ⭐img태그가 absolute이고 div태그의 포지션 값이 없다면 기준은 body태그가 된다.(static기준)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
//컨텐츠 추가
var tag = "<div class='pink'></div>";
tag += "<div class='blue'></div>";
tag += "<img src = '../img/title_layer.gif'>";
tag += "<img src = '../img/glass1.gif'>";
tag += "<img src = '../img/glass2.gif'>";
tag += "<img src = '../img/glass3.gif'>";
$('body').append(tag)
//스타일
$("body").css("margin", "0px");
$('.pink').css('height', '50px').css('background-color', 'rgb(238, 135, 150)')
$('.blue').css('height', '30px').css('background-color', 'rgb(88, 176, 201)')
//**포지션 이해하기**
$("img").css("position", "absolute")
$('img:first').css('top', '0px')
$('img').eq(1).css('left', '300px')
$('img').eq(2).css('left', '450px').css('top', '80px')
$('img:last').css('left', '380px')
})
</script>
</body>
</html>결과
풀스택eDot