2017-11-01 14 views
0

li 요소의 높이를 위치와 같이 다른 li 요소에 영향을 미치지 않고 어떻게 바꿀 수 있습니까? 그러나 호각이 아래에있는 다른 요소와 겹치기를 원합니다 (li). z 지수가 가장 큽니다.다른 엘레멘트에 영향을 미치지 않는 높이 변경

jsfiddle example에는 변경된 높이를두고 있지만, 올려 놓은 li 요소 아래에는 어떤 요소도 옮기고 싶지 않습니다.

+1

http://jsfiddle.net/ktxessch/ – Ali

+0

게시 한 jsfiddle이 필요한 것을 변경하는 것처럼 보입니다. 이것 외에 무엇이 필요합니까? – Froopy

답변

1

여백을 사용하여 높이 변화를 보정 할 수 있습니다.

정상적인 설정에서는 높이가 50px이고 하단 여백이 10px입니다. 이 updated fiddle example에서 원래의 margin-bottom (총 30px)에 여분의 20px를 추가하고 호버 margin-bottom을 10px로, 높이를 70px로 설정했습니다.

그런 식으로 전체 높이는 항상 여백과 함께 80 픽셀이되고 문제없이 li 높이를 이동할 수 있습니다.

편집 : 그것은 아래의 다른 li 항목 오버랩 공중 선회 li을 만들면서 실제로 원래의 의도에 훨씬 더 가깝다@Mr Lister's method. 수정되지 않은 원래의 질문에서 내가 편집 한 '큰 z- 색인'으로 당신이 의미했던 것을 오해했습니다. 내 사과.

+1

또는 여백을 음수로 만들 수 있으므로 항목을 겹칠 수 있습니다. [재창조 된 바이올린] (http://jsfiddle.net/sy5hd7t8/1/). –

+0

당신의 솔루션은 원래의 질문의 마지막 부분을 오해하여 실제로 원하는 것에 더 가깝습니다. 겹치는 것은 그가 원래 염두에 두었던 것입니다. 나는 이것을 반영하기 위해 나의 대답을 업데이트했고 나는 그 질문을 명확히하기 위해 업데이트를했다. – Froopy

+1

예. 또한 나의 예제에서 Z- 인덱스를 설정할 필요가 없다. 왜냐하면 상대적인 위치 지정은 요소를 다른 모든 요소 위에두기에 충분하기 때문이다. 물론 페이지에 z- 인덱스가있는 다른 위치에있는 요소가있는 경우에는 호버드되지 않은 요소보다 높은 호버드 된 Z- 인덱스가 필요합니다. –