调整浏览器大小时，div永久定位

Question

所以我的目标是将这个div背景框定位为“ lightgrey”，并在另一个div中放置文本，但是每次我以所需的方式放置div时，它们似乎都被偏移了，我在想创建@media_query的方法，但是我觉得如果有人有任何好的建议，我将不得不创建太多的语句来对其进行相应的调整。

<div style="width:200px; height:200px;right:0;margin-right:7%; border: 5px;
 solid:grey; background-color:lightgrey;position:absolute;">
</div>

<div style="position:absolute;right:0;margin-right:10%;">
    <h3>{{major_choice.0.Major}}</h3>
    <h3>Overall Rating:</h3>
    <h3>{{major_choice.0.ProfessorRating}}</h3>
</div>

第一张图片是一张地图传单，它完成了我想要实现的目标，并且实质上是在不丢失位置的情况下动态地改变尺寸，与我创建的内容相反，当我调整屏幕大小时，这些内容会不断移出位置。

传单地图（我的目标）：

第一张图片非常适合我希望它的位置：

当我调整大小时会发生这种情况：

我没有大量的CSS经验，我现在正在参加Web开发课程，但是由于假期，我将无法见到我的教授，如果有人可以给我一些建议，我会真的感谢它！

有什么建议吗？

html代码：https://pastebin.com/iTmsyV5Z

Answer 1

通过在主容器中添加元素，绝对定位将很好地工作。然后将与容器一起滚动。如果您要求它保持在屏幕上的位置，则需要使用固定位置，然后相对于视口。因此，在调整顶部和右侧位置以进行补偿时请记住。

.Menu,
.Content {
  position: fixed;
  background-color: #CCC;
  left: 10%;
  right: 10%;
}

.Menu {
  top: 10px;
  height: 50px;
}

.Content {
  top: 70px;
  bottom: 10px;
  overflow: auto;
  padding-right: 250px;
}

.Floating {
  position: absolute;
  background-color: #EDEDED;
  right: 20px;
  top: 20px;
  width: 210px;
  height: auto:
}

<div class="Menu">
  This is the menu
</div>

<div class="Content">
  <div class="Floating">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus felis
    nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis.
  </div>

  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus
    felis nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis. Morbi id quam libero. Donec laoreet ullamcorper lobortis. Etiam quis est ac lacus varius malesuada. Nunc venenatis
    rutrum dui, id euismod nunc porttitor id. Nulla id sapien imperdiet, ullamcorper felis et, rhoncus tortor. Quisque purus tellus, molestie a urna in, bibendum bibendum mauris. Nunc aliquet ornare tincidunt. Praesent leo diam, fermentum nec tempor in,
    pellentesque eget velit. Aenean luctus mauris et turpis vehicula, at tristique ex gravida. Vivamus finibus, tellus vel volutpat facilisis, enim metus mattis mi, quis dictum tortor mi a mauris. Pellentesque malesuada tellus non consectetur feugiat.
    Proin rutrum sem nec odio varius tincidunt. Quisque egestas enim et orci scelerisque, quis viverra lectus tristique. Donec consectetur, lacus sed vehicula lacinia, ipsum arcu consequat odio, sed porta erat neque eu lacus. Proin consequat quam vitae
    nisl vulputate, ut imperdiet justo ultricies. Phasellus dictum vestibulum ullamcorper. Quisque lobortis eros sed ante porta ultricies. Suspendisse sit amet purus non enim fringilla pellentesque. Sed posuere, metus ut venenatis pretium, enim urna laoreet
    sapien, accumsan condimentum mauris nisi sed elit. Nunc mollis sit amet enim ac placerat. Donec elementum consectetur ipsum in molestie. Fusce auctor sollicitudin lorem a pharetra. Vestibulum blandit consectetur sagittis. Nullam varius commodo dictum.
    Sed tempus a nulla nec feugiat. Sed pharetra mattis velit sed sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet vehicula felis. Nullam faucibus interdum rhoncus. Proin eget velit non
    nunc dignissim vestibulum sit amet id nulla. Nunc a lectus mauris. Sed sagittis orci ullamcorper nisi ullamcorper dictum. Etiam ut tellus tortor. In a molestie tortor. Quisque turpis tellus, fermentum euismod eros a, vulputate aliquam sapien. Integer
    nunc dui, scelerisque nec interdum id, auctor ut ante. Curabitur pharetra dui vitae tellus tincidunt auctor. Etiam eget fringilla massa. Phasellus auctor lorem hendrerit massa porttitor, luctus consequat leo semper. Curabitur sollicitudin est sapien,
    sed vulputate neque finibus ac. Aliquam pulvinar enim ac mi congue, eu dapibus velit imperdiet. Suspendisse pretium tellus eu urna auctor, quis sodales erat varius. Aenean eget felis mi. Suspendisse non tellus in mauris congue finibus et et risus.</div>
</div>

Answer 2

我无法真正得到一个完整的示例来进行测试，但是类似：

<div style="width: 200px; height:200px; border: 5px;
    solid:grey; background-color: lightgrey; float: left;">
</div>

<div style="margin-left:10%; float: left;">
    <h3>{{major_choice.0.Major}}</h3>
    <h3>Overall Rating:</h3>
    <h3>{{major_choice.0.ProfessorRating}}</h3>
</div>

或

<div style="width: 200px; height:200px; border: 5px;
    solid:grey; background-color: lightgrey; float: left;">
</div>

<div style="margin-right:10%; float: right;">
    <h3>{{major_choice.0.Major}}</h3>
    <h3>Overall Rating:</h3>
    <h3>{{major_choice.0.ProfessorRating}}</h3>
</div>

在对值进行一些调整之后应该可以工作。不确定是否要一直将灰色框向右或向左移。

我通过使用相对定位实现了这一目标。并浮动两个元素，使它们水平堆叠。我相信这就是您想要的。