부모 컨테이너에 상대적인 고정 위치

Question

임은 컨테이너 내에서 고정 된 요소를 유지하려고 시도하지만 고정 요소는 화면에 따라 자체 배치되지만 부모 요소는 배치하지 않는 것처럼 보입니다.

내 코드 :

<div class="relative"> 
    <div class="absolute"> 
    <div class="fixed"></div> 
    </div> 
</div> 

CSS는 :

.relative{ 
    position: relative; 
    height:800px; 
    width: 400px; 
    background: #000; 
} 

.absolute{ 
    height:60px; 
    width: 60px; 
    position: absolute; 
    top:0; 
    right:0; 
    background: #ccc; 
    -webkit-transform: translateZ(0); 
} 

.fixed{ 
    height:20px; 
    width: 20px; 
    background: red; 
    position: fixed; 
    top:0; 
    right:0; 
} 

내가 원하는 빨간색 상자는 회색 상자 내부에 고정된다. 하지만 지금 스크롤하면 상자가 스크롤되고 나던은 고정되어 있습니다.

라이브를 참조하십시오 : 당신은 당신이 빨간 사업부는 position:absolute 대신 고정되고 싶지 않아 확인 http://codepen.io/undefinedtoken/pen/abhgc

Answer 1

여기서 문제는 -webkit-transform입니다.

크롬은 변환중인 요소에 position:fixed을 렌더링 할 수 없습니다.

Read here

당신은 transform.absolute에서 DIV를 제거하는 시도하고 그것의 부모가 폭 계산 후 .fixed DIV에 margin-left을 설정할 수 있습니다

. 귀하의 경우는 40px입니다.

예 :

.absolute{ 
    height:60px; 
    width: 60px; 
    position: absolute; 
    top:0; 
    right:0; 
    background: #ccc; 
    /* -webkit-transform: translateZ(0); */ 
} 

.fixed{ 
    height:20px; 
    width: 20px; 
    background: red; 
    position: fixed; 
    margin-left: 40px; 
} 

JSFiddle DEMO

Answer 2

있습니까? 예 :

.fixed{ 
    height:20px; 
    width: 20px; 
    background: red; 
    position: absolute; 
    top:0; 
    right:0; 
} 

데모 바이올린 : http://jsfiddle.net/lparcerisa/osxo8ysw/

http://www.w3schools.com/css/css_positioning.asp 가입일 :

고정 위치 인 요소 위치

고정

브라우저 창에 대해 위치된다.

그것은 윈도우가

Answer 3

height:20px; 
width: 20px; 
background: red; 
position: fixed; 
right:0px; 
/* adjust manually by margin*/ 
margin-right: 300px; 

read this article

스크롤 편집 할 경우에도 이동하지 않습니다

CSS

.relative-wrapper { 
     background-color:#f00; 
     height:500px; 
     overflow:scroll; 
     width: 220px; 
     position: absolute; 
     z-index:0; 
    } 

    .fixed { 
     background-color:green; 
     width: 180px; 
     position: absolute; 
     z-index:1; 
     margin: 3px 10px 10px; 
    } 

HTML

,536,

<div class="relative-wrapper"> 
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    </div> 
    <div class="fixed"> 
    Overwrite it the content.. 
    </div>