2014-05-14 2 views
1

나는 svg에 z- 인덱스를 적용 할 수 없다는 것을 잘 알고 있으며 svgs의 경우 z- 인덱스는 요소가 나타나는 순서에 의해 정의됩니다. 문서.z- 인덱스를 사용하여 SVG 앞에 무엇인가 배치하기

하지만 내가 그 SVG의 앞에로 강제로 원하는 내가 사업부 (아닌 SVG)가 가정 및 기타 이유로,이 사업부는 다음과 같이, 마크 업에서 나중에 발생 할 필요 :

마크 업에서 HTML 위에 그것을 이동 외에 앞에 될 사업부를 강제로 어떤 방법이 있나요

<svg>...</svg> 
<div style="z-index=9999999; position: relative;">...</div> 

(여전히 앞에되는 SVG에서 위의 결과)?

+0

div 위치를 지정할 수 있습니까? – Huangism

+0

div의 배경으로 ** SVG를 다시 사용할 수없는 이유를 모르겠습니다. 그게 가능하지 않나요? –

+0

우리는 기본적으로 계층화 된 게임 세계를 만들기 위해 skrollr (https://github.com/Prinzhorn/skrollr)을 사용하고 있습니다. - 다른 레이어 위에 살고있는 다른 HTML 요소와 함께 여러 레이어의 svg를 가지고 있습니다. 문제의 div를 다른 레이어로 이동하는 것은 실제로 여기서는 옵션이 아닙니다. –

답변

0

내가 질문에 충분한 정보를 포함하지 않았다 밝혀 ... 내 실제 코드는 모습보기 다음과 같습니다 : 나타나지 Z 인덱스 사업부를 방지하고 그 고정 : 그것은 위치를했다

<div style="position: fixed"> 
    <svg>...</svg> 
</div> 
<div style="position: fixed"> 
    <div style="z-index: 9999999; position: relative;">...</div> 
</div> 

svg 앞에 - 자세한 내용은 http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements을 참조하십시오. Chrome 22부터는 "모든 위치 : 고정 요소가 이제 새로운 스태킹 컨텍스트를 형성합니다." 즉, z- 인덱스는 고정 된 요소 인 위치에서 서로 상대적입니다.

관련 문제