problema con allineamento a fondo pagina sui tablet

[2nd_SKY]

Ciao a tutti, sono davvero un neofita del webdesign, avevo fatto qualche cosa tempo fa con photoshop+dreamweaver ma solo adesso sto cercando di usare correttemente html e css.

Ho un problema sui credits di una pagina: sul monitor del mac vengono visualizzati correttamente a bordo pagina, così come sul cellulare finché non viene ruotato.

Allora si posizionano al fondo iniziale ma poi quando scorro la pagina stanno fermi invece di scorrere col fondo e continuano a coprire i contenuti.
Ecco il css:

p.creditsbackground{
background-color: rgb(30,30,30);
opacity:0.5;
position: absolute;
bottom: 0px;
right:0px;
padding : 7px 20px 0px 0px;
width: 100%;
height: 20px;
margin:0px 0px 0px 0px;
text-align: right;
font-size: 11px;
font-family: Helvetica, Verdana, Arial, sans-serif;
color: rgb(200,200,200);
text-decoration: none
}
p.credits {
position: absolute;
bottom: 7px;
right: 22px;
margin:0px 0px 0px 0px;
text-align: right;
font-size: 11px;
font-family: Helvetica, Verdana, Arial, sans-serif;
color: rgb(200,200,200);
text-decoration: none
}

ed ecco l'elemento del body:

<p class="creditsbackground"><p class="credits"> credits pagina </p></p>

[ResianTaxidrive]

Non mi convince molto un paragrafo dentro un paragrafo, credo non sia corretto;
a parte questo, il creditsbackground è inserito in un ulteriore contenitore? Cioè, esiste un contenitore esterno che racchiude tutta la pagina, oppure è body il contenitore più esterno?