Kết quả của việc đọc bài viết này, bạn sẽ có thể tạo các div chồng chéo bằng CSS. Với mục đích này, trước tiên, chúng ta sẽ tìm hiểu về “ Chức vụ ' và ' chỉ số z ' đặc tính.
Bắt đầu nào!
Thuộc tính 'vị trí' CSS
Trong HTML, bạn có thể đặt vị trí của các phần tử bằng cách sử dụng “ Chức vụ ' tài sản. Vị trí cuối cùng của phần tử trên trang web được xác định bởi bên phải, bên trái, trên cùng, dưới cùng và kết hợp với các thuộc tính z-index.
Cú pháp
Cú pháp của thuộc tính vị trí là:
Chức vụ : giá trị
Thay cho “ giá trị ”, Bạn có thể đặt các vị trí khác nhau của các phần tử như tuyệt đối, tương đối, cố định và cố định.
Thuộc tính CSS 'z-index'
Các ' chỉ số z Thuộc tính ”được sử dụng để thiết lập thứ tự ngăn xếp của các phần tử. Phần tử có giá trị z-index lớn hơn được đặt trước phần tử khác.
Cú pháp
Cú pháp của thuộc tính z-index như sau:
chỉ số z : Tự động | sốTrong cú pháp đã cho ở trên, “ Tự động 'Được sử dụng để đặt thứ tự theo phần tử mẹ, trong khi đối với trình tự thủ công,' con số ”Được đặt làm giá trị của thuộc tính z-index.
Bây giờ, hãy chuyển sang ví dụ thực tế về việc tạo các div chồng chéo bằng CSS.
Ví dụ 1: Chồng chéo phần thứ hai với phần đầu tiên
Trong phần HTML, chúng tôi sẽ tạo hai div và gán các tên lớp khác nhau là “ div1 ' và ' div2 ”.
HTML
< thân hình >< div lớp = 'div1' > < / div >
< div lớp = 'div2' > < / div >
< / thân hình >
Bây giờ, hãy chuyển sang CSS và làm theo các hướng dẫn đã cho:
- Đặt giá trị của thuộc tính vị trí là “ tuyệt đối ”Để đặt div1 chính xác nơi bạn muốn.
- Điều chỉnh chiều cao và chiều rộng của div1 là “ 250px ' và ' 300px ”.
- Giá trị của chỉ số z được đặt là “ 1 ”.
- Đặt màu nền của div1 là “ rgb (4, 3, 75) ”.
CSS
.div1 {Chức vụ : tuyệt đối ;
Chiều cao : 250px ;
bề rộng : 300px ;
chỉ số z : 1 ;
lai lịch : rgb ( 4 , 3 , 75 ) ;
}
Đầu ra
Div đầu tiên được đặt thành công. Bây giờ, chúng ta chuyển sang div thứ hai.
Để chồng chéo div2, hãy làm theo hướng dẫn đã cho:
- Đặt giá trị của thuộc tính vị trí, chiều rộng và chiều cao của div2 giống như “ div1 ”.
- Đặt giá trị của chỉ số z là “ hai ”Để đặt nó trước div đầu tiên.
- Đặt màu nền khác cho div2 là “ rgb (0, 204, 255) ”.
- Đặt lề của div2 là “ 50px ”Là giá trị margin-top và margin-left.
- Đặt độ mờ của div2 là “ 0,7 ”.
CSS
.div2 {Chức vụ : tuyệt đối ;
bề rộng : 300px ;
Chiều cao : 250px ;
chỉ số z : 3 ;
lai lịch : rgb ( 0 , 204 , 255 ) ;
lề : 50px ;
sự mờ đục : 0,7 ;
}
Đầu ra
Div2 chồng chéo thành công với div1.
Nếu bạn muốn đặt div1 trên div hai, bạn chỉ cần thay đổi giá trị của chỉ số z. Hãy xem một ví dụ về điều này.
Ví dụ 2: Chồng chéo phần thứ nhất với phần thứ hai
Trong ví dụ này, chúng tôi sẽ thay đổi giá trị của chỉ số z của cả hai div. Bên trong ' .div1 ”Của tệp CSS, đặt giá trị của“ chỉ số z 'Thuộc tính' hai ”:
chỉ số z : hai ;Sau đó, trong “ .div2 ', Đặt giá trị của' chỉ số z 'Thuộc tính' 1 ”:
chỉ số z : 1 ;Kết quả là, div đầu tiên sẽ được đặt trước div thứ hai:
Chúng tôi đã biên soạn phương pháp dễ nhất để tạo hai div chồng chéo bằng CSS.
Sự kết luận
Các ' Chức vụ ' và ' chỉ số z Thuộc tính ”được sử dụng để tạo các div chồng chéo trong CSS. Theo mặc định, giá trị của z-index là 1, cho biết rằng div mới được tạo sẽ được đặt trước div hiện có. Tuy nhiên, bạn có thể chỉ định bất kỳ giá trị nào theo yêu cầu của mình để điều chỉnh trình tự chồng chéo. Trong bài viết này, chúng tôi đã cung cấp các phương pháp để tạo các Div chồng chéo bằng CSS.