CSS Định vị

Thuộc tính Định vị (Positioning) của CSS cho phép bạn định vị yếu tố.

CSS Định vị và Float

CSS cung cấp một số thuộc tính cho định vị và float, bằng cách sử dụng các thuộc tính này, bạn có thể tạo ra bố cục dạng cột,重叠布局 một phần với phần khác, thậm chí hoàn thành các nhiệm vụ mà trước đây thường cần sử dụng nhiều bảng.

Ý tưởng cơ bản của định vị rất đơn giản, nó cho phép bạn xác định vị trí của khung yếu tố so với vị trí bình thường của nó, hoặc so với yếu tố cha, một yếu tố khác thậm chí là cửa sổ trình duyệt本身. Rõ ràng, chức năng này rất mạnh mẽ và cũng rất bất ngờ. Để biết, đại lý người dùng hỗ trợ định vị trong CSS2 nhiều hơn so với các khía cạnh khác, điều này không phải là điều gì đáng ngạc nhiên.

Phía khác, CSS1 lần đầu tiên đề xuất sự xuất hiện của float, dựa trên một chức năng được Netscape thêm vào trong giai đoạn đầu phát triển của Web. Float không hoàn toàn là định vị, nhưng rõ ràng nó cũng không phải là bố cục theo luồng bình thường. Chúng ta sẽ làm rõ hơn về ý nghĩa của float trong các chương sau.

Tất cả đều là khung

Các phần tử div, h1 hoặc p thường được gọi là phần tử khối. Điều này có nghĩa là các phần tử này được hiển thị nhưMột khối nội dung, được gọi là “khung khối”. Ngược lại, các phần tử như span và strong được gọi là “phần tử nội tuyến”, vì nội dung của chúng được hiển thị trong dòng, tức là “khung dòng nội tuyến”.

Bạn có thể sử dụng Thuộc tính displayThay đổi loại khung được tạo ra. Điều này có nghĩa là, bằng cách thiết lập thuộc tính display thành block, có thể làm cho phần tử nội tuyến (ví dụ: phần tử <a>) có hành vi như phần tử khối. Cũng có thể thiết lập display thành none để làm cho phần tử được tạo ra không có khung. Điều này thì khung và tất cả nội dung của nó sẽ không hiển thị, không chiếm không gian trong tài liệu.

Nhưng trong một trường hợp, ngay cả khi không có định nghĩa rõ ràng, vẫn sẽ tạo ra phần tử khối. Trường hợp này xảy ra khi thêm một số văn bản vào đầu phần tử khối (ví dụ: div). Ngay cả khi không định nghĩa văn bản đó là đoạn văn bản, nó cũng sẽ được đối xử như đoạn văn bản:

<div>
some text
<p>Some more text.</p>
</div>

Trong trường hợp này, khung này được gọi là khung khối vô danh vì nó không liên quan đến phần tử được định nghĩa riêng.

Dòng văn bản của các phần tử khối cũng xảy ra tình trạng tương tự. Giả sử có một đoạn văn bản chứa ba dòng văn bản. Mỗi dòng văn bản tạo ra một khung vô danh. Không thể áp dụng phong cách cho khung vô danh hoặc khung dòng vì không có nơi để áp dụng phong cách (lưu ý rằng khung dòng và khung dòng nội tuyến là hai khái niệm khác nhau). Tuy nhiên, điều này giúp hiểu rằng tất cả mọi thứ mà chúng ta thấy trên màn hình đều tạo ra một loại khung nào đó.

Cơ chế định vị CSS

CSS có ba cơ chế định vị cơ bản: luồng thông thường, nổi và định vị tuyệt đối.

Trừ khi được chỉ định riêng, tất cả các khung đều được định vị trong luồng thông thường. Nghĩa là, vị trí của các phần tử trong luồng thông thường được quyết định bởi vị trí của phần tử trong (X)HTML.

Các khung khối được sắp xếp từ trên xuống dưới một cách liên tiếp, khoảng cách thẳng đứng giữa các khung được tính toán dựa trên khoảng cách ngoài thẳng đứng của các khung.

Khung dòng nội tuyến được sắp đặt ngang trong một dòng. Chúng có thể được điều chỉnh khoảng cách bằng cách sử dụng lề ngang nội bộ, viền và khoảng cách ngoài. Tuy nhiên, lề ngang nội bộ, viền và khoảng cách ngoài không ảnh hưởng đến chiều cao của khung dòng nội tuyến. Khung ngang được tạo ra bởi một dòng được gọi làKhung dòng (Line Box)Khung dòng có chiều cao đủ để chứa tất cả các khung dòng nội tuyến mà nó chứa. Tuy nhiên, việc thiết lập chiều cao dòng có thể tăng chiều cao của khung này.

Trong các chương sau, chúng tôi sẽ giải thích chi tiết về định vị tương đối, định vị tuyệt đối và định vị nổi.

Thuộc tính position CSS

Bằng cách sử dụng Thuộc tính positionChúng ta có thể chọn 4 loại định vị khác nhau, điều này sẽ ảnh hưởng đến cách tạo khung phần tử.

Ý nghĩa của giá trị thuộc tính position:

static
Vùng khung được tạo ra bình thường. Các phần tử khối tạo ra một khung hình vuông, làm phần của luồng tài liệu, các phần tử nội tuyến sẽ tạo ra một hoặc nhiều khung dòng, đặt trong phần tử cha của nó.
relative
Hộp yếu tố dịch chuyển một khoảng cách nào đó. Yếu tố vẫn giữ hình dạng ban đầu, và không gian mà nó chiếm vẫn được giữ lại.
absolute
Hộp yếu tố bị loại bỏ hoàn toàn khỏi luồng tài liệu và được định vị so với khối chứa. Khối chứa có thể là yếu tố khác trong tài liệu hoặc khối chứa ban đầu. Khu vực mà yếu tố原先 chiếm trong luồng bình thường sẽ đóng lại, như thể yếu tố không tồn tại. Yếu tố sau khi định vị tạo ra một khối cấp độ, bất kể nó tạo ra loại khung nào trong luồng bình thường.
fixed
Hộp yếu tố có biểu hiện giống như khi đặt position thành absolute, nhưng khối chứa là cửa sổ.

Lưu ý:Định vị tương đối thực chất được coi là một phần của mô hình định vị bình thường, vì vị trí của yếu tố so với vị trí của nó trong bình thường.

Mô hình

Định vị: Định vị tương đối
Ví dụ này minh họa cách định vị yếu tố so với vị trí bình thường của yếu tố.
Định vị: Định vị tuyệt đối
Ví dụ này minh họa cách sử dụng giá trị tuyệt đối để định vị yếu tố.
Định vị: Định vị cố định
Ví dụ này minh họa cách định vị yếu tố so với cửa sổ trình duyệt.
Thiết lập cạnh trên của hình ảnh bằng giá trị cố định
Ví dụ này minh họa cách sử dụng giá trị cố định để thiết lập cạnh trên của hình ảnh.
Thiết lập cạnh trên của hình ảnh bằng phần trăm
Ví dụ này minh họa cách sử dụng giá trị phần trăm để thiết lập cạnh trên của hình ảnh.
Thiết lập cạnh dưới của hình ảnh bằng giá trị pixel
Ví dụ này minh họa cách sử dụng giá trị pixel để thiết lập cạnh dưới của hình ảnh.
Thiết lập cạnh dưới của hình ảnh bằng phần trăm
Ví dụ này minh họa cách sử dụng giá trị phần trăm để thiết lập cạnh dưới của hình ảnh.
Thiết lập cạnh trái của hình ảnh bằng giá trị cố định
Ví dụ này minh họa cách sử dụng giá trị cố định để thiết lập cạnh trái của hình ảnh.
Thiết lập cạnh trái của hình ảnh bằng phần trăm
Ví dụ này minh họa cách sử dụng giá trị phần trăm để thiết lập cạnh trái của hình ảnh.
Thiết lập cạnh phải của hình ảnh bằng giá trị cố định
Ví dụ này minh họa cách sử dụng giá trị cố định để thiết lập cạnh phải của hình ảnh.
Thiết lập cạnh phải của hình ảnh bằng phần trăm
Ví dụ này minh họa cách sử dụng giá trị phần trăm để thiết lập cạnh phải của hình ảnh.
Cách sử dụng thanh cuộn để hiển thị nội dung tràn trong yếu tố
Ví dụ này minh họa cách thiết lập thuộc tính overflow để quy định hành động tương ứng khi nội dung của yếu tố quá lớn để phù hợp với khu vực được quy định.
Cách ẩn nội dung tràn trong yếu tố
Ví dụ này minh họa cách thiết lập thuộc tính overflow để ẩn nội dung khi nội dung của yếu tố quá lớn để phù hợp với khu vực được chỉ định.
Cách thiết lập trình duyệt tự động xử lý tràn
Ví dụ này minh họa cách thiết lập trình duyệt tự động xử lý tràn.
Thiết lập hình dạng của yếu tố
Ví dụ này minh họa cách thiết lập hình dạng của yếu tố. Yếu tố này được cắt theo hình dạng này và hiển thị ra.
Sắp xếp hình ảnh thẳng đứng
Ví dụ này minh họa cách sắp xếp hình ảnh thẳng đứng trong văn bản.
Z-index
Z-index có thể được sử dụng để đặt một yếu tố sau một yếu tố khác.
Z-index
Trong ví dụ trên, yếu tố đã thay đổi Z-index.

Thuộc tính định vị CSS

Thuộc tính định vị CSS cho phép bạn định vị yếu tố.

Thuộc tính Mô tả
position Đặt yếu tố vào một vị trí tĩnh, tương đối, tuyệt đối hoặc cố định.
top Định nghĩa khoảng cách từ cạnh trên của yếu tố định vị đến cạnh trên của khối bao gồm.
right Định nghĩa khoảng cách từ cạnh phải của yếu tố định vị đến cạnh phải của khối bao gồm.
bottom Định nghĩa khoảng cách từ cạnh dưới của yếu tố định vị đến cạnh dưới của khối bao gồm.
left Định nghĩa khoảng cách từ cạnh bên trái của yếu tố định vị đến cạnh bên trái của khối bao gồm.
overflow Đặt việc xảy ra khi nội dung của yếu tố tràn ra khỏi khu vực của nó.
clip Đặt hình dạng của yếu tố. Yếu tố được cắt vào hình dạng này và sau đó hiển thị.
vertical-align Đặt cách đối齐 thẳng đứng của yếu tố.
z-index Đặt thứ tự sắp xếp của yếu tố.