锚标记在调整浏览器大小时移动

Question

我正在为一个类做作业，当我调整浏览器大小时，我有一个锚标签在移动，我希望它保持在笔形上，你会在这里看到问题：http://chrisallie.com/index.html

谢谢！

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>

Answer 1

将锚标记移动到<div id="main-content">

然后给#main-content position:relative，给锚position:absolute（去掉所有固定定位的东西）

您现在可以相对于#main-contentdiv定位锚点，您需要为right给它一个负值，但我认为在这种情况下这可能是不可避免的。

您需要调整锚标记的右侧和底部（或顶部）值，但您应该能够使用上述方法执行此操作。

Answer 2

1. 将"给我们留言"移到div 中
2. 向 #main 内容添加position:relative