©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>jQuery Element Position</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				// id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.
				$("#para").offsetParent()
					.css("border", "2px solid red");	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>

<body>

	<h1>.offsetParent() 메소드</h1>
	<div class="container">
		<div>div 요소
			<ul style="position: relative">ul 요소
				<li>li 요소</li>
				<li>li 요소
					<p id="para">p 요소 (기준)
						<span>span 요소</span>
					</p>
				</li>
				<li>li 요소</li>
			</ul>
		</div>
	</div>

	<button>요소의 위치 정보</button>
	
</body>

</html>