Il tag di ancoraggio si sposta quando il browser viene ridimensionato - css

Sto lavorando su un compito per una classe, e ho un tag di ancoraggio che si sta muovendo quando ridimensiono il browser, vorrei che rimanesse posizionato sulla grafica della penna, vedrai il problema qui: http://chrisallie.com/index.html

Grazie!

CSS:
#contact {
position: fixed;
display: block;
font-family: Century Gothic;
text-decoration: none;
text-align: center;
font-size: 18px;
font-weight: bold;
color: rgb(0, 0, 153);
transform: rotate(-77deg);
line-height: 30px;
width: 150px;
height: 20px;
margin: -300px 0px 0px 1335px;
}

HTML:
<div id="main-content">
<a href="index.html" id="home">Home</a>
<a href="index.html" id="webcoding">Web<br />Coding<br />seminar<br /><span>Don"t miss!</span></a>
<a href="index.html" id="javascript">Javascript<br />10:00</a>
<a href="index.html" id="photoshop">Photoshop<br />Lesson 01 due!</a>
<a href="index.html" id="illustrator">guest speaker<br />Illustrator<br />2:00-3:00</a>
<a href="index.html" id="php">PHP<br />5:00-10:00</a>
</div>
<a href="index.html" id="contact">Drop us a line!</a>

risposte:

Sposta il tag di ancoraggio all'interno <div id="main-content">

Quindi dai #main-content position:relative e dai l'ancora position:absolute (rimuovi tutti gli elementi di posizionamento fissi)

Ora puoi posizionare l'ancora rispetto al #main-content div, dovrai dargli un valore negativo per right ma penso che potrebbe essere inevitabile in questo caso.

Dovrai modificare i valori di destra e di fondo (o di cima) per il tag di ancoraggio, ma dovresti riuscire a farlo usando quanto sopra.

1. Sposta "Mandaci una linea" nel div
2. Inserisci position:relative a # contenuto principale