Định vị tuyệt đối phần tử trong CSS

Trong bài học này, chúng ta sẽ phân tích về định vị tuyệt đối phần tử. Nó cho phép sắp xếp các phần tử theo tọa độ đã chỉ định của trang. Ví dụ, có thể đặt một phần tử ở vị trí cách 100px từ đỉnh trang và 200px từ bên trái. Phần tử sẽ di chuyển đến đó, bất chấp việc ở đó sẽ có các phần tử khác và sẽ nằm đè lên chúng. Người ta nói rằng khi đó phần tử thoát khỏi luồng thông thường của tài liệu: tất cả các phần tử còn lại sẽ cư xử như thể phần tử của chúng ta không tồn tại.

Để làm cho một phần tử được định vị tuyệt đối, cần đặt cho phần tử đó thuộc tính position với giá trị absolute. Ngoài thuộc tính này, còn cần hai thuộc tính nữa: một sẽ xác định tọa độ theo chiều dọc, và cái thứ hai - theo chiều ngang.

Cho chiều dọc cần đặt khoảng cách từ trên, hoặc từ dưới. Khoảng cách từ trên được xác định bởi thuộc tính top, còn khoảng cách từ dưới - thuộc tính bottom. Cho chiều ngang cần đặt khoảng cách từ trái, hoặc từ phải. Khoảng cách từ trái được xác định bởi thuộc tính left, còn khoảng cách từ phải - thuộc tính right.

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

Ví dụ

Đầu tiên, hãy tạo hai khối không có định vị (lưu ý rằng các phần tử không sát mép cửa sổ, vì body có margin mặc định):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy đặt định vị tuyệt đối cho khối màu xanh lá, đặt nó ở vị trí cách đỉnh 150px và cách trái 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy đặt khối màu xanh lá vào vị trí cách đỉnh 0px và cách trái 0px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy đặt khối màu xanh lá vào vị trí cách đỉnh 0px và cách phải 0px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy đặt khối màu xanh lá vào vị trí cách đáy 0px và cách phải 0px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ví dụ

Bây giờ hãy đặt khối màu xanh lá vào vị trí cách đáy 0px và cách trái 0px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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

Sử dụng định vị tuyệt đối, hãy sắp xếp các khối như sau: