Thuộc tính position

Thuộc tính position thiết lập phương thức định vị các phần tử. Thuộc tính này thường nhất được sử dụng kết hợp với các thuộc tính top, right, bottom, left, chúng thiết lập khoảng lề từ trên, phải, dưới, trái tương ứng.

Cú pháp

bộ chọn {
	position: absolute | relative | fixed | static | sticky;
}

Các giá trị cho position

Giá trị	Mô tả
`absolute`	Định vị tuyệt đối. Phần tử bị loại bỏ khỏi luồng thông thường của tài liệu và được định vị so với phần tử tổ tiên được định vị gần nhất (nếu có) hoặc so với cửa sổ trình duyệt.
`relative`	Định vị tương đối. Phần tử được dịch chuyển so với vị trí bình thường của nó trong luồng tài liệu, nhưng không gian mà nó chiếm giữ, vẫn được giữ lại.
`fixed`	Định vị cố định. Phần tử bị loại bỏ khỏi luồng thông thường của tài liệu và được định vị so với cửa sổ trình duyệt. Giữ nguyên vị trí khi cuộn trang.
`static`	Định vị tĩnh. Giá trị này có nghĩa là không có định vị và phần tử hoạt động như bình thường.
`sticky`	Định vị dính. Phần tử hoạt động như `relative`, cho đến khi đạt đến vị trí được chỉ định khi cuộn, sau đó dính vào vị trí đó (như `fixed`).

Giá trị mặc định: static.

Ví dụ . Định vị tuyệt đối

Hãy đặt phần tử ở góc trên bên trái màn hình với các khoảng lề nhỏ:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Ví dụ . Định vị tuyệt đối

Và bây giờ hãy đặt phần tử ở góc trên bên phải màn hình với các khoảng lề nhỏ:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Ví dụ . Định vị cố định

Với định vị cố định, phần tử sẽ giữ nguyên vị trí khi cuộn:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Ví dụ . Định vị tương đối

Với định vị tương đối, phần tử được dịch chuyển so với vị trí bình thường của nó, nhưng các phần tử khác hoạt động như thể phần tử đó không bị dịch chuyển:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Ví dụ . Lồng nhau

Nếu phần tử cha có thuộc tính position với giá trị relative, thì các phần tử được định vị tuyệt đối sẽ được định vị so với phần tử cha:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ví dụ . Lồng nhau

Nếu phần tử cha có thuộc tính position với giá trị absolute, thì các phần tử được định vị tuyệt đối sẽ được định vị so với phần tử cha:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ví dụ . Định vị dính

Nếu phần tử có thuộc tính position với giá trị sticky, thì phần tử hoạt động như relative, cho đến khi đạt đến vị trí được chỉ định khi cuộn, sau đó dính vào vị trí đó. Hãy tạo một header dính:

<h1>Tiêu đề chính của trang web</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Ví dụ . Không có vị trí

Nếu phần tử được đặt định vị tuyệt đối mà không chỉ định vị trí, thì phần tử sẽ vẫn đứng ở nơi, mà nó đang đứng khi không định vị, nhưng các phần tử khác sẽ ngừng nhận biết nó:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ví dụ . Một trục

Với định vị tuyệt đối, bạn có thể chỉ định vị trí chỉ theo một trục. Ví dụ, nếu chúng ta đặt thuộc tính top, thì theo chiều dọc phần tử sẽ đứng vào vị trí cần thiết, còn theo chiều ngang sẽ vẫn đứng, ở nơi mà nó đang đứng:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Ví dụ . Tất cả các vị trí

Với định vị tuyệt đối, bạn có thể chỉ định vị trí từ tất cả các phía, mà không cần đặt chiều rộng và chiều cao. Trong trường hợp này, phần tử sẽ đứng ở giữa khối phần tử cha:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Xem thêm

thuộc tính z-index,
thiết lập lớp chồng của các phần tử