레이어 된 페이지에 CSS 테두리를 표시하려면 어떻게해야하나요?

html로 Box and Whiskers 그래프를 작성하려고합니다. 문제는 테두리에 상자가있는 div가 있지만 테두리가있는 색상 이미지가 포함 된 이전 레이어를 덮을 때 테두리가 사라지는 것입니다. 내가 그것을 피할 수 있으면 환경 설정은 배경 이미지 (또는 색상)를 사용하지 않는 것입니다.레이어 된 페이지에 CSS 테두리를 표시하려면 어떻게해야하나요?


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

과 CSS는 다음과 같습니다 :

HTML은



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; 
}

주 div.graphBoxes에 대한 CSS에서 -250px의 여백 탑. 이 값이 감소하면 Box 주위의 테두리가 이전 레이어에서 들여다 보듯 나타납니다.

이 경우 국경을 표시 할 수 있습니까? 감사합니다 ...

출처

2009-05-07 mwiik

위치 지정없이 요소를 겹칠 수 없습니다.

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

출처

2009-05-07 22:46:59

btw -이 마크 업/css에는 다른 문제가 있지만 어떻게 억제되는지 충분히 알지 못합니다. –

33 % 셀 폭; html에서 2 개의 다른 동일한 셀을 제거했습니다. 어쨌든, 이것은 그것을 고쳤다! 흥미로운 것은 검은 선 이미지가 올바르게 겹쳐졌지만 위치 선언으로 div 테두리와 배경색이 나타납니다. 감사!!! – mwiik

-1

이미지가 없으면 무슨 일이 벌어지고 있는지 정확하게 말하기는 어렵지만, 원하는 레이어의 Z- 인덱스를 9999까지 늘린 다음 레이어를 Z- 인덱스 아래로 변경하면 -100으로 예상대로 작동해야합니다.

출처

2009-05-07 19:07:39 jacobangel

Z- 색인은 위치 지정된 요소 (CSS의 일명 position-property)에만 적용됩니다. –

테두리를 원하는대로 표시하려면 여백과 여백을 조정하면됩니다. 내 팁은 모든 패딩과 여백을 제거하고 스타일 시트의 상단에

* { margin: 0; padding: 0; }

을 추가하는 것입니다. 그런 다음 모든 패딩과 여백, 너비 및 높이를 조정하여 사용자가 느끼는 것처럼 보이게하십시오.

Z- 색인은 스타일 시트에 위치 속성이없는 요소에는 적용되지 않습니다.

겸손한 추측은 부정적인 여백으로 인해 문제가 발생한다는 것입니다.

출처

2009-05-07 20:37:52

레이어 된 페이지에 CSS 테두리를 표시하려면 어떻게해야하나요?

답변

관련 문제