Lớp phủ chỉ mục css z

Khi các phần tử được xác định theo vị trí thuộc tính, chúng ta có thể xếp chồng lên các phần tử khác

Thuộc tính z-index xác định thứ tự xếp hạng chồng lên nhau của các phần tử (phần từ có chỉ số z lớn hơn sẽ xếp hạng trên cùng)

Thuộc tính z-index có thể nhận giá trị âm hoặc dương

Vì hình ảnh có z-index là -1, nên nó nằm phía sau văn bản

Ví dụ

View results

Lưu ý. z-index chỉ hoạt động trên các phần tử đã được định vị (location. đối tuyệt đối, vị trí. đối tương đối, vị trí. fixed or position. dính)

Một số ví dụ về Z-Index

---

Phần tử có giá trị thuộc tính z-index lớn hơn luôn xếp hạng trên phần tử có giá trị thuộc tính z-index nhỏ hơn

Ví dụ

View results

Nếu hai phần tử được định vị xếp chồng lên nhau mà không có giá trị thuộc tính z-index được chỉ định, thì phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng

Làm thế nào tôi có thể làm điều đó bằng cách sử dụng kết hợp HTML/CSS/Rails/Prototype. ? . It may in jsfiddle. mạng lưới

cướp w

334K80 Huy hiệu vàng785 Huy hiệu bạc670 Huy hiệu đồng80 huy hiệu vàng785 huy hiệu bạc670 huy hiệu đồng

hỏi ngày 26 tháng 2 năm 2011 lúc 23. 15 26/02/2011 lúc 23. 15

Keruilinkeruilin keruilin

16. 2K33 Huy hiệu vàng107 Huy hiệu bạc174 Huy hiệu đồng33 huy hiệu vàng107 huy hiệu bạc174 huy hiệu đồng

1

Bạn có thể sử dụng CSS để giải quyết vấn đề

div {
  position: relative;
  display: inline;
}
.imtip {
  position: absolute;
  bottom: 0;
  right: 0;
}

Về cơ bản, tôi đã thực hiện ít nhiều những gì ZDYN nói, chỉ là bạn cần đưa một

2 vào thùng chứa nếu không thì container

3 kéo dài toàn bộ chiều rộng

Malcolm

40. 4K11 Huy hiệu vàng68 Huy hiệu bạc91 Huy hiệu Đồng11 huy hiệu vàng68 huy hiệu bạc91 huy hiệu đồng

Đã trả ngày 27 tháng 2 năm 2011 lúc 4. 44 27 tháng 2 năm 2011 lúc 4. 44

Dưới đây là một ví dụ đơn giản sử dụng div thay vì hình ảnh. http. //jsfiddle. mạng/sqjtr/

Về cơ bản, bạn đặt cả hai hình ảnh của mình vào cùng một thùng chứa. Cung cấp cho vùng chứa một vị trí không tĩnh (trong ví dụ của tôi, tương đối). Sau đó đưa ra hình ảnh lớp phủ

4 và định vị nó theo cách bạn muốn sử dụng

5 và

6

Đã trả lời ngày 27 tháng 2 năm 2011 lúc 3. 55 27 tháng 2 năm 2011 lúc 3. 55

ZDYNZDYN zdyn

2. 1401 Huy hiệu vàng15 Huy hiệu bạc17 Huy hiệu đồng1 huy hiệu vàng15 huy hiệu bạc17 huy hiệu đồng

1

You go here. Điều này được thực hiện bằng cách sử dụng 2 hình ảnh

    

    



.parent{
    width:200px;
    height:200px;
    position:absolute;
    z-index:0;
}

.inner{
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
}

Kiểm tra ví dụ làm việc tại http. //jsfiddle. mạng/wpwzq/

Đã trả lời ngày 27 tháng 2 năm 2011 lúc 6. 00 27 tháng 2, 2011 lúc 6. 00

Husseinhussein Husseinhussein

42K25 Huy hiệu vàng112 Huy hiệu bạc143 Huy hiệu đồng25 huy hiệu vàng112 huy hiệu bạc143 huy hiệu đồng

1

Attempt that

html, body, .wrapper { height: 100%; }
.wrapper { position: relative; }
.top { height: 15%; background: #222; }
.mid { height: 70%; background: #CCC; }
.bot { height: 15%; background: #777; }
.container { 
    position: absolute;
    background: #FFF; 
    padding: 20px; 
    width: 80%;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    clear: both;
}
.container > div {
    float: left;
    width: 42%;
    height: 250px;
    padding: 1%;
}
.container > div:first-child {
    background: #EEE;
    float: left;
    width: 54%;
}
.container > p {
    position: absolute;
    bottom: -100px;
    right: 0;
    border: 1px solid #EEE;
    width: 50%;
    height: 70px;
}

    

    

        

            
Some Text Here
            
IMAGE HERE
            
DESCRIPTION HERE
        
    
    

Thu thập từ stackoverflow

Đã trả lời ngày 22 tháng 6 năm 2021 lúc 5. 12 22 tháng 6 năm 2021 lúc 5. 12

Xem câu trả lời của tôi cho câu hỏi này

Sự khác biệt với vấn đề của bạn là bạn không cần bất kỳ JavaScript nào nếu bạn không muốn, bạn chỉ có thể thêm các div vào HTML và đặt chúng hoàn toàn trên đầu các bức ảnh