div內的固定位置

我有一個箭頭圖像，當你點擊它時，你可以回到頁面的頂部......我希望這個箭頭在它的div父項中有一個固定的位置。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>

這使我的白色箭頭在屏幕上停留的地方我去的頁面上。不過，我希望它只能保留在我的「相對」部分，但不能離開它（如果我在滾動的過程中低於或超過此部分）。有沒有簡單的方法來做到這一點？我希望我的問題是明確的:)

來源

2016-09-28 BMT

你的意思是說箭頭的位置是絕對的？ –

嘗試'位置：絕對''.up' – Pugazh

@QuyTruong - 不，它是固定的。這樣它保持在我的分區。我希望它做的是在我滾動時在div內「移動」。如果我把位置放在絕對位置上，它會停留在我的「元素相對」區域的右上角... 我的位置固定實際上使其消失所以現在我沒有「位置」...位置絕對使它顯示 – BMT

使用position: absolute上.up（沒有浮動）

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

來源

2016-09-28 10:33:40 Johannes

謝謝你的回答。我嘗試過，但沒有達到我想要的。我希望箭頭（.up）在div內移動，因爲我滾動 - div非常大，如果我將它放在絕對位置（或者用float右移），它只會停留在div的右上角。對不起，我的問題沒有說清楚... – BMT

您應該使用position:absolute;而不是position:fixed;您箭頭，因此它不會被固定在當您滾動頁面的同一位置。在這裏你去：

.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>

來源

2016-09-28 10:34:37

選中此項：https://jsfiddle.net/denea/o2z1o26c/42/ 我希望我能理解你的請求權。 –

啊！幾乎 - 現在div本身在「箭頭下」滾動。如果你願意，你可以去網站本身：http://berglind-margo.com/當你點擊「travail」或「qui suis-je」你會看到整個事情。問題是我想箭頭滾動div而不是相反... – BMT

div內的固定位置

回答

相關問題