1

This is my fiddle

As you can see, the links are at top:95% of the screen not page., how to make it 95% of the page? 

.terms {
 position:absolute;
top:95%;
right:10px;
}

.terms a{
 color:#333;
 text-decoration:none;
 margin-left:10px;

}
<h1>
Hello
</h1>
<p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


<div class="terms">
<a href="contact.html">Contact Us</a>
<a href="terms.html">Terms</a>
<a href="privacy.html">Privacy</a>
</div>
Josh
  • 121
  • 2
  • 9
  • 1
    Possible duplicate of [Make div stay at bottom of page's content all the time even when there are scrollbars](https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) – Alexander Jun 16 '17 at 10:48
  • No, in this question, it is fixed. I do not want it fixed – Josh Jun 16 '17 at 10:54

6 Answers6

2

Wrap a container around the elements and make it position:relative

.container {
  position: relative;
}

.terms {
  position: absolute;
  top: 95%;
  right: 10px;
}

.terms a {
  color: #333;
  text-decoration: none;
  margin-left: 10px;
}
<div class="container">
  <h1>
    Hello
  </h1>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>


  <div class="terms">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
  </div>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

Easiest way, Try this, position: relative; bottom: 0; float: right;

.terms {
    position:relative;
    bottom: 0;
    float: right;
}

.terms a{
 color:#333;
 text-decoration:none;
 margin-left:10px;

}
<h1>
Hello
</h1>
<p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


<div class="terms">
<a href="contact.html">Contact Us</a>
<a href="terms.html">Terms</a>
<a href="privacy.html">Privacy</a>
</div>
codesayan
  • 1,705
  • 11
  • 22
0

You can add position:relative to body.Or add a wrapper div and add position:relative to that div.

For absolute position elements the top,bottom left,right values will be relative to the next parent element with relative(or absolute) positioning

.wrapper{
  position:relative;
 }
 
 .terms {
     position:absolute;
       top:95%;
       right:10px;
    }

    .terms a{
     color:#333;
     text-decoration:none;
     margin-left:10px;

    }
<div class="wrapper">
<h1>
    Hello
    </h1>
    <p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


    <div class="terms">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
    </div>
    
 </div>

For position it at the bottom of the screen you can use position:fixed; This will position it at a specified position relative to the screen's viewport and don't move it when scrolled.

.terms {
 position:fixed;
   top:94%;
   right:10px;
}

.terms a{
 color:#333;
 text-decoration:none;
 margin-left:10px;

}
<h1>
Hello
</h1>
<p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


<div class="terms">
<a href="contact.html">Contact Us</a>
<a href="terms.html">Terms</a>
<a href="privacy.html">Privacy</a>
</div>
XYZ
  • 4,450
  • 2
  • 15
  • 31
0

You have positioned this element absolutely.

For it the 95% to mean anything that element needs to be related to something else. So 95% from the top of...what?

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static). If a positioned ancestor doesn't exist, the initial container is used.

MDN

In this case, it's the body element.

So add

body {
  position: relative;
}


body {
  position: relative;
}

.terms {
  position: absolute;
  top: 95%;
  right: 10px;
}

.terms a {
  color: #333;
  text-decoration: none;
  margin-left: 10px;
}
<h1>
  Hello
</h1>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>


<div class="terms">
  <a href="contact.html">Contact Us</a>
  <a href="terms.html">Terms</a>
  <a href="privacy.html">Privacy</a>
</div>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

By default position : relative property assigned to html tag means screen. So add position:relative property to body tag .

Mr.Pandya
  • 1,899
  • 1
  • 13
  • 24
0

<style>
    .terms {
        position:absolute;
    top:95%;
    right:10px;
    }

    .terms a{
        color:#333;
        text-decoration:none;
        margin-left:10px;

    }
    </style>
    <h1>
    Hello
    </h1>
    <p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


    <footer style="float:right;">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
    </footer>
 <style>
    .terms {
        position:absolute;
    top:95%;
    right:10px;
    }

    .terms a{
        color:#333;
        text-decoration:none;
        margin-left:10px;

    }
    </style>
    <h1>
    Hello
    </h1>
    <p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


    <footer style="float:right;">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
    </footer>
Hema Nandagopal
  • 668
  • 12
  • 35