Làm cách nào để buộc đường viền css hiển thị trên trang lớp?

Question

Tôi đang cố gắng để mã đồ thị hộp và râu trong html. Vấn đề là, tôi có biên giới xung quanh một div (như trong, hộp), nhưng các biên giới biến mất khi phủ lớp trước đó, trong đó có một hình ảnh màu dải. Tùy chọn không sử dụng hình nền (hoặc màu) ở đây nếu tôi có thể tránh được.

Các html là:

<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%"> 
<tr class="graphArea"> 
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div> 

<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td> 
</tr> 
</table> 

và css là:

table#BoxAndWhiskers tr.graphArea td { 
    width: 33%; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes { 
    z-index: 1; 
    margin-top: -250px; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox { 
    margin: 0; 
    padding: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
    border: 2px solid black; 
} 

Lưu ý margin-top của -250px trong css cho div.graphBoxes. Khi điều này giảm, bạn sẽ thấy các đường viền xung quanh Hộp xuất hiện khi chúng nhìn ra từ lớp trước.

Có thể hiển thị đường viền trong trường hợp này không? Cảm ơn ...

Answer 1

Bạn không thể xếp lớp thành phần mà không cần định vị.

.graphBoxes { 
    position: relative; 
    z-index: 1; 
    margin-top: -250px; 
} 

Answer 2

Thật khó để nói chính xác những gì đang xảy ra mà không có hình ảnh để xem, nhưng tôi nghĩ nếu bạn tăng chỉ mục z của lớp bạn muốn lên trên 9999 và sau đó thay đổi chỉ số z bên dưới đến -100 nó sẽ hoạt động như mong đợi.

Answer 3

Bạn có thể chỉ cần điều chỉnh lề và phần đệm để làm cho đường viền hiển thị theo cách bạn muốn. Mẹo của tôi là xóa tất cả phần đệm và lề và thêm

* { margin: 0; padding: 0; } 

vào đầu biểu định kiểu của bạn. Sau đó điều chỉnh tất cả các miếng đệm và lề, chiều rộng và chiều cao để làm cho nó trông giống như bạn cảm thấy.

Hãy nhớ rằng chỉ mục z không áp dụng cho các phần tử không có thuộc tính vị trí trong biểu định kiểu.

Dự đoán khiêm tốn là biên độ âm của bạn đang gây ra sự cố.