div 안에 위치 고정

Question

클릭하면 페이지 상단으로 돌아 오는 화살표 이미지가 있습니다 ...이 화살표가 div 부모 내 고정 위치에 있도록하고 싶습니다. 내가 페이지에가는 곳마다

.relative { 
 
    position: relative; 
 
} 
 
.up { 
 
    float: right; 
 
    max-width: 3%; 
 
    display: block; 
 
    position: fixed; 
 
    top: 40%; 
 
    bottom: 30%; 
 
    right: 2%; 
 
}

<section class="elements relative" id="about"> 
 
    <a href=""> 
 
    <img src="img/arrow-up.png" class="up" id="up-about" alt="" /> 
 
    </a> 
 
    <h2>Qui suis-je &#63;</h2> 
 
    <p>Lots of text</p> 
 
</section>

이

이 화면에 내 흰색 화살표 숙박한다 :

여기에 코드입니다. 그러나 나는 단지 내 "친척"섹션에 머물러 있고 싶지만, 나가서는 안된다. (내 스크롤에서이 섹션 아래로 가면). 간단한 방법이 있나요? 내 질문 : 분명 희망

Answer 1

당신은 따라서이 고정되지 않습니다 화살표 당신의 대신 position:fixed;의 position:absolute;를 사용해야합니다 .up (없이 플로트)

.up { 
    max-width: 3%; 
    display: block; 
    position: absolute; 
    top: 40%; 
    bottom: 30%; 
    right: 2%; 
} 

Answer 2

에 사용 position: absolute 귀하의 페이지를 스크롤 할 때 동일한 장소. 여기 요 :

.relative { 
 
    position: relative; 
 
} 
 
.up { 
 
    max-width: 3%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 40%; 
 
    bottom: 30%; 
 
    right: 2%; 
 
}

<section class="elements relative" id="about"> 
 
    <a href=""> 
 
    <img src="img/arrow-up.png" class="up" id="up-about" alt="" /> 
 
    </a> 
 
    <h2>Qui suis-je &#63;</h2> 
 
    <p>Lots of text</p> 
 
</section>