Thuộc tính position
chỉ định loại phương pháp định vị được sử dụng cho một phần tử [tĩnh, tương đối, cố định, tuyệt đối hoặc dính]
Thuộc tính position
chỉ định loại phương pháp định vị được sử dụng cho một phần tử
Có năm giá trị vị trí khác nhau
static
relative
fixed
absolute
sticky
Các phần tử sau đó được định vị bằng cách sử dụng các thuộc tính trên cùng, dưới cùng, bên trái và bên phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính position
được đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí
Chức vụ. tĩnh;
Các phần tử HTML được định vị tĩnh theo mặc định
Các phần tử được định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên, dưới, trái và phải
Một phần tử với position: static;
không được định vị theo bất kỳ cách đặc biệt nào;
Cái này
phần tử có vị trí. tĩnh;
Đây là CSS được sử dụng
Chức vụ. liên quan đến;
Một phần tử có position
0 được định vị so với vị trí bình thường của nó
Đặt các thuộc tính top, right, bottom và left của một phần tử được định vị tương đối sẽ khiến nó bị điều chỉnh khỏi vị trí bình thường. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng trống nào do phần tử để lại
Cái này
phần tử có vị trí. liên quan đến;
Đây là CSS được sử dụng
Thí dụ
div. liên quan đến {
Chức vụ. liên quan đến;
bên trái. 30px;
biên giới. Chất rắn 3px #73AD21;
}
Chức vụ. đã sửa;
Phần tử có position
1 được định vị so với khung nhìn, có nghĩa là phần tử luôn ở cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính top, right, bottom, left dùng để định vị phần tử
Phần tử cố định không để lại khoảng trống trên trang mà nó thường được đặt
Lưu ý phần tử cố định ở góc dưới bên phải của trang. Đây là CSS được sử dụng
Thí dụ
div. đã sửa {
Chức vụ. đã sửa;
đáy. 0;
đúng. 0;
bề rộng. 300px;
biên giới. Chất rắn 3px #73AD21;
}
Cái này
phần tử có position
1
Chức vụ. tuyệt đối;
Một phần tử có position
3 được định vị tương ứng với tổ tiên được định vị gần nhất [thay vì được định vị tương đối so với khung nhìn, như cố định]
Tuy nhiên;
Ghi chú. Các phần tử được định vị tuyệt đối bị xóa khỏi luồng thông thường và có thể chồng lấp các phần tử
Đây là một ví dụ đơn giản
Cái này
phần tử có vị trí. liên quan đến;
Cái này
phần tử có vị trí. tuyệt đối;
Đây là CSS được sử dụng
Thí dụ
div. liên quan đến {
Chức vụ. liên quan đến;
bề rộng. 400px;
chiều cao. 200px;
biên giới. Chất rắn 3px #73AD21;
}
div. tuyệt đối {
Chức vụ. tuyệt đối;
đứng đầu. 80px;
đúng. 0;
bề rộng. 200px;
chiều cao. 100px;
biên giới. Chất rắn 3px #73AD21;
}
Chức vụ. nếp;
Một phần tử có position
4 được định vị dựa trên vị trí cuộn của người dùng
Phần tử cố định chuyển đổi giữa relative
và fixed
, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi một vị trí bù nhất định được đáp ứng trong chế độ xem - sau đó nó "dính" vào vị trí [như vị trí. đã sửa]
Ghi chú. Internet Explorer không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- [xem ví dụ bên dưới]. Bạn cũng phải chỉ định ít nhất một trong số position
7, position
8, position
9 hoặc position
0 để định vị cố định hoạt động
Trong ví dụ này, phần tử cố định dính vào đầu trang [_______0_______1], khi bạn đến vị trí cuộn của nó
Tại W3Schools, bạn sẽ tìm thấy một tài liệu tham khảo Bootstrap đầy đủ về tất cả các lớp CSS, Thành phần và plugin JavaScript - tất cả đều có các ví dụ "Tự dùng thử"
Bootstrap Chủ đề / Mẫu
Chúng tôi đã tạo một số Mẫu Bootstrap mà bạn có thể sử dụng. Chúng hoàn toàn miễn phí để sử dụng
Bootstrap 5 so với. Bootstrap 3 & 4
Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn;
Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ
Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery
Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng