위치보다元素: 상대 / 절대 *
CSS 타겟팅 상대 및 절대 일반적인 특성이다. 여기에 상대 및 절대의 차이를 알 수 있습니다. 어떻게 하위 부모 상황에서 좋은 위치를 만드는 방법?
다음과 같이 초기 코드는
HTML 코드를
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位的几种用法</title>
<link rel="stylesheet" href="./example1.css">
</head>
<body>
<div class="wrapper">
<div class="superfather">
<span>我是爷爷</span>
<div class="father">
<span>我是爷爷的儿子爸爸</span>
<div class="son1">
<span>我是爸爸的儿子1</span>
</div>
<div class="son2">
<span>我是爸爸的儿子2</span>
</div>
</div>
</div>
</div>
</body>
</html>
CSS 코드
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.wrapper{
height: 700px;
width: 1900x;
background-color: white;
padding-top: 20px;
}
.father{
height: 200px;
width: 400px;
background-color: green;
padding-top: 20px;
}
.son1{
height: 100px;
width: 200px;
background-color:red;
}
.superfather{
height: 300px;
width: 500px;
background-color:yellow;
margin: 0 auto;
}
.son2{
height: 100px;
width: 200px;
background-color:gray;
}
도 같은 효과
첫 번째 단계 : 수정 아들 최고 재산 absoute 1 개 위치 속성 플러스 왼쪽
렌더링을 : 
이 시간에 발견, 위치 기준점의 아들 브라우저의 왼쪽 상단 모서리입니다
두 단계 : 아빠 속성에 플러스가 될 수 절대 상대 위치 / 부여 
발견이 시간을. 위치 기준점 서브 클래스 변경, 그는 부모 클래스의 왼쪽 상단 모서리입니다! ! !
우리는 아버지의 위치를 취소, 어떤 위치 할아버지가 일어날 증가하는 시도? 
바로 위 부모 클래스에 아들 하나를 볼 수하면 어떤 위치보다 속성 사례가없는만큼 부모 클래스의 모든 속성을받은 위치가, 그것은 부모 클래스의 왼쪽 상단에 위치합니다!
상대 및 절대 차이 : 두 번째 단계
상대적인 위치를 기반으로
절대 위치하는 기반 (부모 밑에 상황이 있다면) 부모 클래스 아니더라도 여전히 브라우저 점 위치의 상부 좌측 코너에 대하여.
아버지가 위치 속성이있는 경우 1. 아들 1position 속성은 평소와 같이, 여전히 부모 클래스를 기반으로 위치, 절대입니다.
이 부모 클래스에 따라 아들 1position 속성은 상대를 찾을 수없는, 그러나 그들의 위치는 위치에 따라하면되는
셋째 : 부모 클래스가 왜 서브 클래스 상대 aboslute이 그것을 사용?
상대 위치와 부모가 자신의 위치를 기반으로, 당신은 쉽게 브라우저에서 위치를 수정할 수 있습니다.
그리고 하위 클래스는 상위 클래스, 서브 클래스 변경 사항을 따를 때 abosulte 기반 위치와 부모 클래스는, 위치가 변경됩니다.