부모가 상대 일 때 고정 위치

Question

이 것이 가능한지 확실하지 않지만 사양을 이해 한 결과 고정 된 위치 요소의 부모는 상대 위치를 갖는 부모 요소가 아닌 뷰포트 여야합니다.

포지셔닝에서는 분명히 모든 것이 작동하지만 z-index에서는 그렇지 않습니다.

이 예를 살펴 경우,

.parent { 
 
    height: 1000px; 
 
} 
 

 
.el-one { 
 
    position: relative; 
 
    z-index: 2; 
 
    height: 100px; 
 
    width: 100%; 
 
    color: red; 
 
} 
 

 
.el-two { 
 
    position: relative; 
 
    z-index: 2; 
 
    background-color: black; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.im-fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="parent"> 
 
    <div class="el-one"> 
 
    <div class="im-fixed">Hello</div> 
 
    </div> 
 
    <div class="el-two"></div> 
 
</div>

https://codepen.io/anon/pen/mmvXaE

아래로 스크롤하면 고정 요소는 검은 색 부분 뒤에 간다가, 내가 필요로하는 방법입니다 el-one에서 빨간색 요소를 이동하지 않고 앞에 빨간색 요소를 가져옵니다.

과거에 스크롤 할 때 일부 임베드 코드를 수정해야하는 프로젝트가 있습니다. 실제 코드의 더 좋은 예입니다. 바로 위의 예는 간단한 방법으로 문제를 강조 : https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements하지만 운이 해결 방법을 찾을 수 없습니다 :

<div class="parent"> 
    <div class="el-one"> 
    <div id="my-wrapper"> 
     <iframe class="im-fixed"></iframe> 
    </div> 
    </div> 
    <div class="el-two"></div> 
</div> 

,

내가이 온라인 나는 문제가 발생했습니다 믿는 것을 이야기했습니다.

내가 생각할 수있는 것은 JS를 사용하여 요소를 이동하여 편집기가 소스 코드를 삽입하고 사용자가 요소를지나 스크롤 할 때 본문 앞에 추가하는 것입니다.

누구든지이 문제를 접하거나 아이디어가 있습니까?

Answer 1

너는 이와 비슷한 것을 원합니까? 다음

.parent { 
 
    height: 1000px; 
 
} 
 

 
.el-one { 
 
    position: relative; 
 
    z-index: 99; 
 
    height: 100px; 
 
    width: 100%; 
 
    color: red; 
 
} 
 

 
.el-two { 
 
    position: relative; 
 
    z-index: 2; 
 
    background-color: black; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.im-fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="parent"> 
 
    <div class="el-one"> 
 
    <div class="im-fixed">Hello</div> 
 
    </div> 
 
    <div class="el-two"></div> 
 
</div>

Answer 2

를 사용하여 중복하려는 것보다는 .el-one의 z-index 높은 증가 :

.el-two { 
    position: relative; 
    z-index: -1; 
    background-color: black; 
    height: 500px; 
    width: 100%; 
} 

Answer 3

이 문제를 해결하는 방법은 여러 가지가 있습니다. Z- 인덱스 증가, div 정리 등

나는 당신이 끈적한 헤더 기능을 시도하는 것 같아. 위치 CSS 속성에는 새로운 값이 있습니다.

position: sticky

나는 코드를 청소하고 모든 Z-인덱스를 제거했습니다. 첨부 된 코드 스 니펫을 확인하십시오.

참고 : Chrome, Firefox에서만 지원됩니다. IE에서는 지원되지 않습니다.

.parent { 
 
    background-color: green; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 5000px; 
 
} 
 

 
.header { 
 
    position: sticky; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
} 
 

 
.el-one { 
 
    background-color: blue; 
 
    color: white; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
.el-two { 
 
    background-color: orange; 
 
    height: 500px; 
 
    width: 100%; 
 
}

<div class="parent"> 
 
    <div class="header">I am a header</div> 
 
    <div class="container"> 
 
    <div class="el-one"> 
 
     I am el-one 
 
    </div> 
 
    <div class="el-two"> 
 
     I am el-two 
 
    </div> 
 
    </div> 
 
</div>