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

Trong bài học trước, chúng ta đã phân tích rằng, nếu đặt cho phần tử cha thuộc tính relative, thì các phần tử con của nó sẽ được định vị tuyệt đối tương đối với nó. Đây là cách thường được làm, khi không muốn phần tử cha thoát khỏi luồng bố cục thông thường.

Cũng có thể xảy ra trường hợp phần tử cha được đặt absolute. Trong trường hợp này, các phần tử con có absolute cũng sẽ được định vị tương đối với phần tử cha như vậy, chứ không phải tương đối với cửa sổ trình duyệt:

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

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

Tạo một khối vuông với định vị tuyệt đối kích thước 400px. Bên trong nó, tạo thêm hai khối kích thước 50px. Đặt khối đầu tiên ở góc trên bên phải của phần tử cha, và khối thứ hai - ở góc dưới bên trái.