Trong bài học kinh nghiệm này, bản thân sẽ trả lời chúng ta tò mò kỹ rộng về layer vào html với css. Chúng ta vẫn chia nhiều layer với nằm trong tính z-index.

Bạn đang xem: Z-index css là gì


Video – Chia nhiều layer với thuộc tính z-index

Hướng dẫn chi tiết

Làm một bài xích tập nhỏ tuổi nhằm rõ hiểu hơn

Mẫu demo

*
các bài tập luyện phân chia những layer với thuộc tính z-index

Nội dung yêu cầu

+ Chia 3 layer: Layer 1 là hình, layer 2 là khối Đen mờ với đường dẫn, layer 3 trên thuộc là ô color cam Sale.


+ Các bước nhỏng đặt chiều rộng độ cao, font chữ, size chữ, màu sắc nền mờ các bạn có thể từ áp dụng các nằm trong tính vẫn ra mắt để làm. Riêng về khối hận color cam bao gồm bo tròn các góc, bản thân reviews thêm thuộc tính border-radius: 4px; (4px là bán kính bo góc) 

+ Việc phân chia layer những lớp sử dụng trực thuộc tính z-index. Khối hận xung quanh thuộc gồm position:relative. Các lớp bao gồm position: absolute, bottom cùng left để xác định trí. Lớp như thế nào dưới thuộc đặt số nhỏ tuổi độc nhất, máy từ bỏ tăng đột biến.

Layer 1 là thẻ img, z-index: 1;Layer 2 là thẻ a, có display: block và z-index:2;Layer 3 là thẻ p, z-index:3

Lớp dưới thuộc số nhỏ dại tốt nhất, lớp bên trên cùng số lớn số 1.

Các thuộc tính mới

+ border-radius: 5px; bo tròn những góc của khối hận với nửa đường kính 5px

Các nằm trong tính sẽ phía dẫn

Các thuộc tính flexbox

display: flex; hoặc display: inline-flex

flex-direction :

+ row, theo mặt hàng tương tự cùng với float:left

+ row-reverse, theo sản phẩm từ bỏ sau ra trước, float:right;

+ column, theo cột tự trên xuống dưới

+ column-reverse, theo hàng từ bên dưới lên ở trên.

flex-wrap (có xuống dòng hay là không khi đầy đủ chiều rộng).

+ no-wrap: ko xuống dòng, chỉ hiện lên trên 1 hàng

+ wrap: đủ chiều rộng của khối thân phụ thì tự động xuống mẫu.

+ wrap-reverse: đảo ngược.

justify-content: canh và chỉnh sửa theo chiều ngang cho các khối hận mặt trong

+ center: tự động căn giữa (tương tự text-align :center)

+ flex-start (dồn thanh lịch trái)

+ flex-end (dồn thanh lịch phải)

+ space-between ( phân tách mọi trong khối)

+ space-around (phân chia đều các khối hận với hai lề của kăn năn ngoài).

Xem thêm: Vắc Xin Rota Là Gì? Uống Vacxin Rota Ở Đâu, Giá Bao Nhiêu? Lưu Ý Thời Điểm “Vàng” Để Trẻ Uống Vắc

align-items: canh và chỉnh sửa theo theo hướng dọc (kăn năn phía bên ngoài buộc phải bao gồm độ dài cầm cố định)

+ stretch: từ đậy đầy chiều cao

+ flex-start: dồn lên trên

+ flex-end: dồn xuống bên dưới.

+ base-line: chỉ canh chữ cho thẳng mặt hàng.

+ center: canh thân theo chiều dọc. Thuộc tính này hỗ trợ tương đối nhiều mang đến câu hỏi làm web, với là trực thuộc tính mới chỉ có trường đoản cú CSS 3.

Các trực thuộc tính chia layer

+ position: relative; (chọn làm cho mốc)

+ position: absolute; (xác định trí mang lại khối, đi thông thường cùng với những thuộc tính top, bottom, left, right)

+ top: 10px, địa chỉ tính tự trên xuống

+ bottom: 10px, địa điểm tính trường đoản cú dưới lên

+ left: 10px, địa chỉ trường đoản cú bên trái

+ right: 10px, vị trí từ bỏ mặt phải

+ wrap-reverse: hòn đảo ngược.

Các ở trong tính hay dùng

+ background-size: cover, để hình luôn luôn đầy 100% khối

+ nth-child(3) để ghi đtrằn css cho các đoạn kiểu như nhau.

+ margin: auto, tự động hóa canh biên

+ text-transform: uppercase, auto viết hoa

+ box-shadow: 2px 2px 7px; tạo thành đổ bóng (các thông số theo thứ tự là đổ sang trọng đề nghị, bên dưới, độ rộng của trơn mờ)

+ transition: 0.4s; thiết lập cấu hình lại những hiệu ứng

+ float: left (right) dồn những khối

+ overflow: hidden

+ display: bloông xã, đổi thay thẻ ko xuống chiếc thành khối nhằm hiểu được thuộc tính margin

+ display: inline, trở thành các thẻ ko xuống dòng

+ margin cùng padding, biên tính từ bỏ viền của khối ra phía bên ngoài, lề tính tự viền kân hận vào phía bên trong nội dung

+ border : viền, 1px (độ dày) blaông xã (màu) solid (nhiều loại nét)

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nphân tử, hệt như thẻ

+ font-family : loại chữ tuyệt phông chữ

+ font-style: italic : tạo chữ in nghiêng

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn loại.

+ color: (màu chữ) dùng green, red giỏi mã màu

+ background-color: (màu nền) black

+ background-image: url(imgage source), hình nền

Code mẫu: Download

Nếu bao gồm vướng mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.