如何让css左右响应？

Question

我正在尝试使我的模态具有响应性。 我目前在css中使用“right：405px”来使我的模态坚持在正确的部分。 但是，模式的位置会随着浏览器的屏幕大小的变化而变化，这意味着它没有响应。 在附带的屏幕截图中，您可以在单击“信息图标”时看到“Google Translator Modal”。 谁能帮我写一个响应式CSS代码？

谢谢。

.google-translator-modal {
  position: absolute;
  background: #fff;
  z-index: 10000;
  right: 405px;
  top: 40px;
  width: 230px;
  height: 50px;
  border-radius: 3px;
}

<div class="google-translator-modal" style="display: none">
  <span class="upward-white-triangle"></span>
  <div class="google-translator-modal-content">
    powered by
    <a class="google-logo-link" href="https://translate.google.com" target="_blank">
      <img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
      Translate
    </a>
  </div>
</div>

Answer 1

这是一个粗略的例子，但它最终归结为将绝对定位元素定位在相对定位元素内并在悬停时显示它。

我已将“模态”放在我称之为工具提示的内容中，似乎触发了它的外观。通过将工具提示放在内部并相对于触发它的元素，我们不必担心距离视口边缘有多远。工具提示将始终相对于我示例中的图标位置。

<div class="translate">
  Select Language 
  
  <span class="translate-icon">&omega;
    <div class="translate-tooltip">
      Powered by Google Translate
    </div>
  </span>
  
</div>

{{1}}