+ Thuộc tính position dùng xác định vị trí của 01 phần tử HTML trên màn hình trình duyệt (viewport)
+ Thuộc tính position rất dễ gây nhầm lẫn trong css.
+ Bây giờ, chúng ta...dzô!!!
+ Tạo ngay 01 file html với 02 thẻ div lồng nhau như sau:
<div class="container">
<div class="child">Nhân vật CHÍNH là tui đây</div>
</div>
Trong cặp thẻ <style></style> chúng ta định dạng màu mè 01 chút cho thẻ div container
 |
| Định dạng thẻ div container |
+ Hình ảnh trên là mình -> Nhấp phải chuột lên nội dung - Inspect... - chọn thẻ container
+ Chúng ta thấy lần lượt từ Ngoài vào Trong có 04 khung vs 04 màu sắc:
Hồng - Cam - Xanh lá - Xanh dương (chính là thẻ chúng ta đang chọn) trong đó:
- Hồng - margin - có số 200 do chúng ta mới khai báo trong lớp .container (200 là so vs viewport)
- Cam - border - chỉ có dấu (-) nghĩa là =0 do chưa khai báo gì.
- Xanh lá - padding - chỉ có dấu (-) nghĩa là =0 do chưa khai báo gì.
- Xanh dương - width x height - kích thước hiện tại theo chiều ngang x dọc của phần tử đang chọn (div container)
Ghi chú: nhấp chuột lần lượt vào 04 khung màu sẽ thấy các phần tử được chọn thay đổi tương ứng...
Tương tự vs thẻ div child: |
| Định dạng thẻ child |
Thuộc tính position hay ăn kèm vs 02 món rau: top và left -> tọa độ vị trí của phần tử.
Mình có 05 điều cần đề cập trong bài viết này:
- static (mặc định)
Nếu không khai báo gì cho thuộc tính position => css sẽ tự hiểu là position: static
-> chẳng có gì để nói ở trường hợp này. - relative
Khai báo phần tử div child là position: relative; top: 20px; left: 50px;
-> phần tử child sẽ cách ra 01 khoảng tương ứng (xem 04 khung màu có thêm 01 khung thứ 05 position bao ngoài)
position relative - absolute
Khai báo phần tử div child là position: absolute; top: 20px; left: 50px;
-> em bé child nhảy ra ngoài thẻ container luôn (do nó k biết ai là CHA -thẻ chứa - nên xem màn hình viewport là CHA)
thêm position: relative cho thẻ div container -> em bé child đã biết div container là CHA nên nhày vào trong - Bây giờ nó nằm vị trí giống trường hợp relative khi nãy.
Kết luận: nếu muốn xài position absolute phải khai báo cả phần tử CON và CHA. - fixed
Khai báo phần tử div child là position: fixed; top: 20px; left: 50px;
-> cho dù cuộn chuột xuống dưới em bé child vẫn nằm yên 01 vị trí
Kết luận: xài position fixed khi cần giữ yên phần tử 01 vị trí cố định (ví dụ link Top quay về đầu trang web - vào trang lophocvitinh.vn để xem ví dụ thực tế) - z-index (chồng lấn - overlapping - ai nằm trên, ai nằm dưới)
Khai báo phần tử div child là z-index: -999;
Cuộn chuột xuống dưới sẽ thấy nó bị div container che mất.
-> đổi z-index: 999;
Cuộn chuột xuống để thấy em bé child nằm đè lên trên. - Mở rộng: position dùng trong Bootstrap thì làm sao?
Nó chỉ dùng được 02 trường hợp
+ sticky-top hay fixed-top để cố định phần tử ở trên.
+ sticky-bottom hay fixed-bottom để cố định phần tử ở dưới.
-> tóm lại nên hạn chế dùng Bootstrap để khai báo position do không linh hoạt.
Nếu bạn vẫn muốn dùng thì...của bạn đây:
https://getbootstrap.com/docs/5.3/helpers/position/
Vẫn chưa rõ vui lòng xem thêm video clip sau:
Bài này mình làm thêm phần CÂU HỎI TRẮC NGHIỆM để các bạn nhớ kiến thức hơn.
Xem thêm [ Ngân Hàng Câu Hỏi Trắc Nghiệm ] tại đây.
19001549-0939496022-0979540147-0974795207-0902133948-0906629079-0945823926-02836221063-0886426100-0934862792
0909208610-0773058071-0944518424-0944518424-0932955682-0944531867-02888822879-0702678910-0838966996-0862419420-0975579548-0973888371-
Tác giả #drM
Không có nhận xét nào:
Đăng nhận xét