我已经搜索过这个网站，以及w3schools试图为自己解答这个问题，不幸的是我没有。
如果您在我的网站（http://theust.net/characters.php）上查看此页面并向下滚动，您会看到两个DIV弹出，其中包含图片。
使用CSS并将DIV移动到正确的位置，我能够将它们放在我希望它们出现的确切位置周围，我遇到的问题是它们在1920x1080显示器上看起来就像那样，如果你有任何其他决议，他们最终在随机的位置。
我想知道是否有人知道如何将它们固定或固定到它们旁边的DIV上，而不是将它们放在容器DIV中。
（源代码不是隐藏的，应该是可见的。以防万一，我已将其包括在内。）
HTML
<?php
echo '
<div class="over-content">
<div class="Div1">
<span class="anchor" id="HOverview"></span>
<h2 class="over-h2">Overview</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div2">
<span class="anchor" id="HPoliChar"></span>
<h2 class="over-h2">Political Characters</h2>
<h4 class="char-names" id="Leo-Char">Leonard H. McCoy</h4>
<p>
Little is known about the life of Leonard McCoy before he entered politics, however, what we do know is that he is not fully human. He is a cyborg, and while some cyborgs age as humans do, the only part of Leonard McCoy that is human is his brain, which is constantly monitored and maintained by his many on-board systems, which keeps it in perfect condition.
</p>
<p>
From what we can gather, before he was a Cyborg he had a loving Wife and three children. From what\'s left of the reports, all we know is a tragedy befell them, and the only survivor was Leonard. After year\'s in a Hospital, the doctors realized the only part of him not dead or damaged was his brain. In what can only be considered the birth of a new race, they recreated his body with robotics and put his brain into it.
</p>
<p>
Now, many centuries later, He is still the President of the United Stars of Trekys. Unwilling to not continue to run for President, he has won the last elections dating back all the way to the fall of our dictatorship. For the last fifty years, he has run under his own third party and continuously wins!
</p>
<br>
<br>
<h4 class="char-names">Conrad K. Leopold</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div3">
<span class="anchor" id="HMiliChar"></span>
<h2 class="over-h2">Military Characters</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div4">
<span class="anchor" id="HMiscChar"></span>
<h2 class="over-h2">Misc. Characters</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div1-Side1">
Test
</div>
<div class="Div2-Side1">
<img src="images/Leonard-McCoy.jpg" alt="Leonard H McCoy" height="135px" width="101.25">
<br>
<span>
<b>Age:</b> 675
<br>
<b>Race:</b> Cyborg
<br>
<b>Occupation:</b> President
</span>
</div>
<div class="Div2-Side2">
<img src="images/Leonard-McCoy.jpg" alt="Leonard H McCoy" height="135px" width="101.25">
<br>
<span>
<b>Age:</b> 65
<br>
<b>Race:</b> Human
<br>
<b>Occupation:</b> Vice-President
</span>
</div>
</div>
';?>
CSS：
/*
This is the stylesheet for the overall website.
*/
.site {
background: #f5f5f5;
}
h2 {
text-align: right;
}
.content {
text-align: center;
margin: 0 auto;
padding: 25px;
width: 60%;
}
.hcontent {
position: relative;
top: 6.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.content p {
color: #888;
font-style: italic;
}
.content p::first-letter {
font-size: 200%;
color: #090909;
}
h3.open, h3.closed {
font-family: monospace;
font-size: 60px;
font-weight: bold;
color: #999;
}
h3.open {
text-align: left;
}
h3.closed {
text-align: right;
}
h3.who-quote {
font-family: monospace;
font-size: 20px;
font-weight: bold;
color: #999;
text-align: right;
font-style: italic;
}
h2.over-h2 {
text-align: right;
}
h4 {
text-align: right;
}
/* Specific Content Page CSS */
.anchor {
display: block;
height: 110px; /*same height as header*/
margin-top: -110px; /*same height as header*/
visibility: hidden;
}
.Div1 {
position: relative;
top: 6.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div2 {
position: relative;
top: 8.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div3 {
position: relative;
top: 10.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div4 {
position: relative;
top: 12.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div5 {
position: relative;
top: 14.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div6 {
position: relative;
top: 16.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
/* Side Divs */
.Div1-Side1 {
position: absolute;
height: 200px;
width: 180px;
padding-top: 10px;
padding-left: 15px;
background: #fff;
text-align: left;
box-shadow: 2px 2px 2px 2px #ebebeb;
bottom: 20em;
left: 20em;
z-index: 10;
visibility: hidden;
}
.Div2-Side1 {
position: absolute;
height: 200px;
width: 180px;
padding-top: 10px;
padding-left: 15px;
background: #fff;
text-align: left;
box-shadow: 2px 2px 2px 2px #ebebeb;
bottom: 1.2em;
left: 94.6em;
z-index: -1;
visibility: visible;
display: none;
}
.Div2-Side2 {
position: absolute;
height: 200px;
width: 180px;
padding-top: 10px;
padding-left: 15px;
background: #fff;
text-align: left;
box-shadow: 2px 2px 2px 2px #ebebeb;
bottom: -14.8em;
left: 94.6em;
z-index: -1;
visibility: visible;
display: none;
}
/* Side Div Content */
.Div2-Side1 span {
font-size: 10px;
}
.Div2-Side2 span {
font-size: 10px;
}
/* h3 Links */
.content p a:link, h3 a:link {
color: #888;
text-decoration: underline;
}
.content p a:visited, h3 a:visited {
color: #888;
text-decoration: none;
}
.content p a:active, h3 a:active {
color: #555;
text-decoration: none;
}
.content p a:hover, h3 a:hover {
color: #555;
}
@media screen and (max-width: 640px) {
.Div1-Side1 {
display: none;
visibility: hidden;
}
}
答案 0 :(得分：0)
要将它们固定在旁边的DIV右侧，只需将left: 100%设置为.Div2-Side1和.Div2-Side2，同时将position: relative设置为您的内容案例.over-content，另一方面，如果您不想将它们放入容器中，我担心您必须手动垂直定位，例如：
.Div2-Side1{
top: 800px;
}
.Div2-Side2{
top: 1040px;
}