Định vị tương đối với phần tử cha trong CSS

Nếu một phần tử được đặt là relative, và phần tử con của nó - absolute, thì phần tử con này sẽ được định vị tương đối với phần tử cha của nó, chứ không phải tương đối với cửa sổ trình duyệt.

Thông thường, trong trường hợp này, phần tử cha được chỉ định là relative mà không có độ lệch. Trong trường hợp này, phần tử cha không có gì thay đổi, nhưng tất cả các phần tử con của nó bây giờ sẽ được định vị tương đối với nó.

Chúng ta hãy xem các ví dụ.

Ví dụ

Đầu tiên, hãy tạo một khối cha và một khối con mà không định vị:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy định vị tuyệt đối khối màu xanh lá cây. Vì phần tử cha không được chỉ định là relative, phần tử con sẽ được định vị tương đối với cửa sổ trình duyệt:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy chỉ định phần tử cha là relative. Trong trường hợp này, phần tử con sẽ được định vị tương đối với phần tử cha của nó:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Bài tập thực hành

Trong các bài tập tiếp theo, khối chính được căn giữa bằng margin với giá trị auto, còn các khối khác được định vị tương đối với nó bằng cách sử dụng thuộc tính position.