fix position inside div

Question

I have an arrow image that gets you back to the top of the page when you click on it... I would like this arrow to have a fixed position inside its div parent.

Here's the code:

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

This makes my white arrow stay on the screen wherever I go on the page. However I would like it to only stay within my "relative" section but not go out of it (if I go below or over this section in my scrolling). Is there a simple way to do this? I hope my question is clear :)

Answer 1

You should use position:absolute; instead of position:fixed; for your arrow, therefore it won't be fixed in the same place when you scroll your page. Here you go:

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

Answer 2

Use position: absolute on .up (and no float)

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