Gửi lại css

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

Cá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

/* 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;

z-index = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit    

z-index = 
  auto       |
    |
  inherit