锚点不起作用，但如果将锚点移动到顶部就可以了。我不明白最近发生了什么。这是我第一次在StackOverflow中提问。谢谢在advanced.here是完整的HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet" >
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
<a href="www.google.com" class="anchor_Send_Email">Send me an email</a>
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content
for the book, which includes a complete subset of usable skills. After the core
content, each section of the book is designed as an independent module. This
means that these sections don't have to be taught in sequence. As a result, you
can customize your courses by assigning just those sections that you want to
teach.</p>
<p>Whenever possible, each of the chapters is also designed as an independent
module. When this is true, you can assign just those chapters that are right
for your courses. This approach also makes the chapters better for on-the-job
reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a
unique top-down design that moves from the simple to complex. This makes it
easier for trainees to learn. It also means that you can present the topics at
the start of a chapter to make sure everyone understands the essential details,
without presenting all of the topics in a chapter. Then, your trainees can
learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information
is presented in "paired pages." In each pair, the right page is a
figure that contains the syntax, guidelines, and examples, and the left page is
text that contains the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace.
If, for example, you're a novice, you'll probably want to read the text on the
left as you refer to the figure on the right. But if you have experience, you
may be able to get all the information you need from the figure. Either way,
our customers tell us that they love this presentation method because it helps
them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our
paired-pages format makes it easy for your trainees to access all the
information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the
expanded table of contents or the index to find the topic they're looking for.
Then, the figure on the righthand page will give them the details they need to
apply what they learned in your course.</p>
<p>This type of quick reference is absolutely essential when you're working
with the hundreds of classes, methods, and properties of an OO language like
Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on
experience without wasting any time. That's because we provide the starting
code, either from our web site or the Instructor's CD, so that trainees don't
have to enter routine code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of
what they've just learned. Sometimes, they challenge the trainees to apply what
they've learned in new ways. And you can assign the exercises so your trainees
do them in class or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text
and exercise design. Curiously, though, the exercises in some books do present
new skills. Unfortunately, this means that (1) trainees who don't do the
exercises don't learn the new skills, and (2) there's no easy way for trainees
to find the information they need if they're having trouble since the skills
haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books
teach by presenting complete, real-world applications that include design,
code, and all related components. These applications help your trainees get
started quickly and also help them reach new skill levels. As we see it,
studying applications like these is the best way to learn how all of the parts
of an application work together, so this is an essential part of the learning
process.</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD
for one of our books, you'll see that our CDs provide everything else you need
for an effective course...except the busywork. That's why you should be able to
plan and implement a course that's based on one of our books in record time.
Once that's done, our books and instructional materials will help ensure the
success of your course.</p>
</div>
</body>
</html>
这是完整的CSS
section{
height: 100vh;
vertical-align: middle;
background-color:#f794f2;
}
.section_text {
color:#f7eb94;
font-size:15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
.content{
display:inline;
/*relative so it would move to the left*/
position:relative;
}
--------这是我遇到麻烦的地方
<div class="aside">
<!--if a move anchor here it works-->
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
<!--here it does not work-->
<a href="#index" class="anchor_Send_Email">Send me an email</a>
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did
in college, also some of my personal projects and programming concepts I
learn in college. visiting.</h3>
</div>
这是使用html的这部分的CSS
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
答案 0 :(得分：1)
通过在内容和侧边栏上使用position relative，你覆盖了float的一些特性，所以内容div实际上是在侧边栏上，即使内容看起来正确定位。我刚刚删除了position: relative;规则，现在看起来很好。要查看发生了什么，请右键单击并检查代码中的链接，您将看到.content实际上已被选中。
section {
height: 100vh;
vertical-align: middle;
background-color: #f794f2;
}
.section_text {
color: #f7eb94;
font-size: 15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/* background-color:#5bde47; */
}
.image_myself {
margin-left: 25%;
display: block;
}
.anchor_Send_Email {
margin-left: 25%;
}
.content {
display: inline;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
<a href="www.google.com" class="anchor_Send_Email">Send me an email</a>
<form></form>
<h3>Hello! My name is Salvador Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content for the book, which includes a complete subset of usable skills. After the core content, each section of the book is designed as an independent module. This means that these
sections don't have to be taught in sequence. As a result, you can customize your courses by assigning just those sections that you want to teach.
</p>
<p>Whenever possible, each of the chapters is also designed as an independent module. When this is true, you can assign just those chapters that are right for your courses. This approach also makes the chapters better for on-the-job reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a unique top-down design that moves from the simple to complex. This makes it easier for trainees to learn. It also means that you can present the topics at the start of a chapter
to make sure everyone understands the essential details, without presenting all of the topics in a chapter. Then, your trainees can learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information is presented in "paired pages." In each pair, the right page is a figure that contains the syntax, guidelines, and examples, and the left page is text that contains
the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace. If, for example, you're a novice, you'll probably want to read the text on the left as you refer to the figure on the right. But if you have experience, you may be able to
get all the information you need from the figure. Either way, our customers tell us that they love this presentation method because it helps them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our paired-pages format makes it easy for your trainees to access all the information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the expanded table of contents or the index to find the topic they're looking for. Then, the figure on the righthand page will give them the details they need to apply what they learned
in your course.</p>
<p>This type of quick reference is absolutely essential when you're working with the hundreds of classes, methods, and properties of an OO language like Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on experience without wasting any time. That's because we provide the starting code, either from our web site or the Instructor's CD, so that trainees don't have to enter routine
code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of what they've just learned. Sometimes, they challenge the trainees to apply what they've learned in new ways. And you can assign the exercises so your trainees do them in class
or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text and exercise design. Curiously, though, the exercises in some books do present new skills. Unfortunately, this means that (1) trainees who don't do the exercises
don't learn the new skills, and (2) there's no easy way for trainees to find the information they need if they're having trouble since the skills haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books teach by presenting complete, real-world applications that include design, code, and all related components. These applications help your trainees get started quickly and also
help them reach new skill levels. As we see it, studying applications like these is the best way to learn how all of the parts of an application work together, so this is an essential part of the learning process.
</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD for one of our books, you'll see that our CDs provide everything else you need for an effective course...except the busywork. That's why you should be able to plan and implement
a course that's based on one of our books in record time. Once that's done, our books and instructional materials will help ensure the success of your course.</p>
</div>
</body>
</html>