1. child class 생성
- body에서 부모 class 안에 child class를 넣어준다.
<body>
<div class="b">
<div class="child"></div>
</div>
</body>2. position 속성 지정
- head의 style 태그에서 position 속성을 원하는 대로 지정해준다.
<head>
<style>
.b {
position: relative;
left: 100px;
top: 100px;
z-index: 100;
background: green;
}
.child {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 50px;
background: red;
}
</style>
</head>3. 구현 결과
부모인 .b 선택자의 left값을 자식인 .child 선택자가 이어받게 된다.
- 옵션 1: 부모의 position이 absolute일 경우, 브라우저 기준으로 자식이 이동한다.
- 옵션 2: 부모의 position이 relative일 경우, 부모를 기준으로 자식이 이동한다.
유저가 왜 그랬을까