Trong nhiều trường hợp, bạn có thể muốn đặt một hình ảnh lên trên một hình ảnh khác. Có nhiều cách để đạt được điều này bằng cách sử dụng HTML và CSS. Bạn có thể tìm thấy ở đây một số phương pháp đơn giản nhất từ bài học này
Mã HTML-CSS sau đây đặt một hình ảnh lên trên một hình ảnh khác bằng cách tạo một div tương đối được đặt trong luồng của trang. Sau đó, đặt hình nền trước dưới dạng tương đối để div biết nó phải lớn như thế nào. Tiếp theo là đặt hình ảnh lớp phủ dưới dạng tuyệt đối so với phía trên bên trái của hình ảnh đầu tiên
Mã nguồn HTML-CSS
Chức vụ. tương đối - Trong phương thức vị trí tương đối, bạn có thể định vị phần tử so với vị trí bình thường của nó. Trong trường hợp này, bạn nên sử dụng left hoặc right và top hoặc bottom để di chuyển phần tử so với vùng chứa của nó
Chức vụ. tuyệt đối - Khi chúng ta định vị một phần tử là Tuyệt đối, phần tử đó sẽ bị xóa hoàn toàn khỏi quy trình bình thường của tài liệu. Ở Vị trí tuyệt đối, vị trí được đặt thông qua một số tổ hợp thuộc tính trái, phải, trên và dưới
thêm về. Vị trí CSSCách tiếp cận tiếp theo là sử dụng chỉ mục z để đặt một hình ảnh lên trên một hình ảnh khác
Mã nguồn HTML-CSS
chỉ số z
Trong khi các phần tử CSS chồng chéo, khi sử dụng vị trí tuyệt đối và tương đối, hành vi mặc định là có các phần tử đầu tiên bên dưới các phần tử sau. Trong những trường hợp này, chúng ta có thể kiểm soát việc phân lớp các phần tử được định vị bằng cách sử dụng thuộc tính chỉ mục z. Khi sử dụng thuộc tính chỉ mục z, bạn có thể chỉ định hộp nào xuất hiện trên hộp kia
CSS giúp bạn định vị phần tử HTML của mình. Bạn có thể đặt bất kỳ phần tử HTML nào ở bất kỳ vị trí nào bạn thích. Bạn có thể chỉ định xem bạn muốn phần tử được định vị tương ứng với vị trí tự nhiên của nó trong trang hay tuyệt đối dựa trên phần tử cha của nó
Bây giờ, chúng ta sẽ thấy tất cả các thuộc tính liên quan đến định vị CSS với các ví dụ –
Định vị tương đối
Định vị tương đối thay đổi vị trí của phần tử HTML so với vị trí thường xuất hiện. Vì vậy, "trái. 20" thêm 20 pixel vào vị trí TRÁI của phần tử
Bạn có thể sử dụng hai giá trị top và left cùng với thuộc tính vị trí để di chuyển phần tử HTML đến bất kỳ đâu trong tài liệu HTML
Thuộc tính CSS z-index
đặt thứ tự z của phần tử được định vị và phần tử con hoặc phần tử linh hoạt của phần tử đó. Các phần tử chồng lấp có chỉ số z lớn hơn bao gồm các phần tử có chỉ số z nhỏ hơn
Thử nó
Đối với một hộp được định vị [nghĩa là một hộp có bất kỳ position
nào ngoài static
], thuộc tính z-index
chỉ định
- Cấp độ ngăn xếp của hộp trong bối cảnh xếp chồng hiện tại
- Hộp có thiết lập bối cảnh xếp chồng cục bộ hay không
cú pháp
/* Keyword value */
z-index: auto;
/* values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;
Thuộc tính z-index
được chỉ định là từ khóa
z-index =0 hoặc
auto |
|
inherit
z-index =0
auto |
|
inherit
giá trị
z-index =0
auto |
|
inherit
Hộp không thiết lập bối cảnh xếp chồng cục bộ mới. Cấp độ ngăn xếp của hộp được tạo trong bối cảnh xếp chồng hiện tại là
z-index =2
auto |
|
inherit
z-index =0
auto |
|
inherit
z-index =0 này là cấp độ ngăn xếp của hộp được tạo trong bối cảnh xếp chồng hiện tại. Hộp cũng thiết lập bối cảnh xếp chồng cục bộ. Điều này có nghĩa là các chỉ mục z của con cháu không được so sánh với các chỉ mục z của các phần tử bên ngoài phần tử này
auto |
|
inherit
định nghĩa chính thức
Giá trị ban đầu ________ 10Áp dụng cho các phần tử được định vịKế thừakhông cóGiá trị tính toánnhư đã chỉ địnhSố nguyên kiểu hoạt ảnhTạo ngữ cảnh xếp chồng