CSS - Định vị

Mục lục

什么是 CSS Định vị?

Xin chào các nhà vô địch CSS tương lai! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của CSS định vị. Là giáo viên máy tính ở gần bạn, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Tin tôi đi, đến cuối bài học này, bạn sẽ định vị các phần tử như một chuyên gia!

CSS định vị giống như việc sắp xếp nội thất trong một căn phòng. Cũng như bạn quyết định đặt ghế sofa hoặc kệ sách ở đâu, CSS định vị cho phép bạn kiểm soát vị trí các phần tử xuất hiện trên trang web của bạn. Đây là một công cụ mạnh mẽ có thể biến đổi thiết kế tĩnh của bạn thành các bố cục động.

Cú pháp

Trước khi chúng ta nhảy vào các loại định vị khác nhau, hãy cùng xem qua cú pháp cơ bản:

selector {
position: value;
}

Ở đây, selector là phần tử HTML bạn muốn định vị, và value là loại định vị bạn muốn áp dụng. Đơn giản phải không? Bây giờ, hãy cùng khám phá chi tiết từng loại định vị.

Phần tử Định vị Tĩnh

Định vị tĩnh là mặc định cho mọi phần tử. Nó giống như điểm xuất phát trong một trò chơi bài - nơi tất cả các quân cờ bắt đầu trước khi bắt đầu trò chơi.

div {
position: static;
}

Với định vị tĩnh, các phần tử tự nhiên chảy trong tài liệu. Chúng không bị ảnh hưởng bởi các thuộc tính top, bottom, left hoặc right. Đây là cách " bình thường " mà các phần tử hành xử.

Phần tử Định vị T поблизости

Định vị tương đối giống như nói với một phần tử, "Di chuyển một chút từ nơi bạn thường ở." Nó rất tốt cho việc làm nhỏ các điều chỉnh mà không làm gián đoạn luồng của các phần tử khác.

.box {
position: relative;
top: 20px;
left: 30px;
}

Trong ví dụ này, phần tử .box của chúng ta sẽ di chuyển 20 pixel xuống và 30 pixel sang phải từ vị trí bình thường của nó. Nhớ rằng, các phần tử khác vẫn sẽ hành xử như thể hộp của chúng ta không di chuyển!

Phần tử Định vị Tuyệt đối

Định vị tuyệt đối là kẻ nổi loạn trong thế giới CSS. Nó phá vỡ luồng tài liệu bình thường và định vị itself relative to its nearest positioned ancestor (hoặc khối chứa ban đầu nếu không có tổ tiên được định vị tồn tại).

.absolute-box {
position: absolute;
top: 50px;
right: 30px;
}

Phần tử .absolute-box này sẽ được định vị 50 pixel từ trên và 30 pixel từ phải của tổ tiên được định vị gần nhất của nó. Nó giống như cho một phần tử một máy bay phản lực - nó có thể bay ở bất kỳ đâu trên trang!

Phần tử Định vị Cố định

Định vị cố định giống như dán một ghi chú vào màn hình máy tính của bạn. Không matter how much you scroll, nó vẫn ở đó.

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

Mã này tạo ra một navbar luôn ở trên cùng của màn hình, ngay cả khi bạn cuộn xuống trang. Nó rất phù hợp cho các menu điều hướng hoặc các thông báo quan trọng bạn muốn người dùng luôn thấy.

Phần tử Định vị Dính

Định vị dính là loài chameleon của CSS định vị. Nó hành xử như relative cho đến khi phần tử đạt đến một ngưỡng cụ thể, sau đó nó trở thành fixed.

.sticky-header {
position: sticky;
top: 0;
}

Điều này tạo ra một tiêu đề cuộn bình thường với trang cho đến khi nó đạt đến đỉnh, sau đó dính vào đó khi bạn tiếp tục cuộn. Nó giống như một trò ma thuật cho trang web của bạn!

Định vị Văn bản Trong Ảnh

Bây giờ, hãy kết hợp kỹ năng định vị của chúng ta để tạo ra điều gì đó thú vị - văn bản được định vị trên ảnh:

<div class="image-container">
<img src="landscape.jpg" alt="Beautiful Landscape">
<p class="image-text">Nature's Beauty</p>
</div>

.image-container {
position: relative;
}

.image-text {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Mã này định vị văn bản ở góc dưới bên phải của ảnh. Bóng văn bản thêm một chi tiết tốt, làm cho nó dễ đọc trên các nền khác nhau.

Các Thuộc tính Liên quan đến Định vị CSS

Hãy kết thúc với bảng các thuộc tính quan trọng liên quan đến CSS định vị:

Thuộc tính	Mô tả	Ví dụ
top	Đặt vị trí mép trên	top: 10px;
bottom	Đặt vị trí mép dưới	bottom: 20%;
left	Đặt vị trí mép trái	left: 5em;
right	Đặt vị trí mép phải	right: 15vw;
z-index	Điều khiển thứ tự chồng	z-index: 100;

Nhớ rằng, các thuộc tính này hoạt động khác nhau tùy thuộc vào phương pháp định vị bạn đang sử dụng. Hãy thử nghiệm với chúng để tạo ra các bố cục thú vị!

Và thế là xong, các em học sinh yêu quý của tôi! Chúng ta đã cùng nhau hành trình qua thế giới của CSS định vị. Từ tĩnh đến dính, chúng ta đã bao gồm tất cả. Nhớ rằng, thực hành làm nên完美, vì vậy đừng sợ thử nghiệm với các kỹ thuật này. Trước khi bạn biết điều đó, bạn sẽ tạo ra các bố cục web làm cho ngay cả những nhà phát triển có kinh nghiệm cũng phải nói "Wow!"

Bây giờ, hãy tiến lên và định vị những phần tử với lòng tự tin. Và luôn nhớ - trong thế giới CSS, không có gì gọi là "out of position"!

Credits: Image by storyset