仅使用 CSS 根据另一个元素的位置定位一个元素答案

【问题标题】：Position one element based on the position of another element using only CSS仅使用 CSS 根据另一个元素的位置定位一个元素
【发布时间】：2013-03-17 17:15:26
【问题描述】：

我做了一个简单的方法来显示帮助文本，它看起来像一个仅使用 CSS 的弹出窗口。它工作得很好，除了默认情况下弹出窗口是左对齐的。我希望窗口更接近图标本身，例如（在我的示例中）“left：360px;”会显示。由于悬停图标的位置可能会改变，有人知道根据悬停图标的位置设置弹出窗口位置的方法吗？我们使用 jQuery 和 Prototype，但我更喜欢只使用 CSS，因此可以在任一类型的页面上使用相同的代码。谢谢。

这是我的例子：

编辑：这已经得到回答，但这里是固定代码，以防其他人正在寻找一种在将鼠标悬停在图标上时显示弹出消息的简单方法。此外，这里有一个 jsfiddle.net 上的示例，因此您可以轻松尝试：http://jsfiddle.net/zDADW/

顺便说一句，如果有人知道为什么有人会将此排在第一位（在撰写本文时，有人点击了此问题的向下箭头），请告诉我。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Show help text when hovering using CSS</title>
          <style type="text/css">
               #help:hover  #help_popup {
                    /*If you hover over the help icon, show the help_popup span*/
                    display: block;
               }

               #help {
                    /*This is the part I was missing*/
                    position: relative;
                }

               #help_popup {
                    /*Normally, hide this span*/
                    display: none;
                    position: absolute;
                    width: 15em;
                    padding: 10px;
                    background: #CFF;
                    color: #000;
                    border: 3px solid;
                    text-align: center;
                    left: 10px;     /*this is still needed even if it's 0*/
               }
          </style>
     </head>
     <body>
        <div>
            This shows a popup window using CSS when you mouse over an image.
            <div>
                Hover over the question mark for a popup help window.
                <span id="help">
                    <img src="questionmark.png" alt="[?]"/> 
                    <span id="help_popup">
                          This is the normally hidden help text.
                        <br/>It only shows up when you hover over the question mark.
                    </span>
                </span>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： css positioning

【解决方案1】：

将#help { position: relative; } 添加到您的 CSS 中。这将允许绝对定位的元素计算它相对于#help 元素的位置。进行此更改后，您可能会发现要减少 left 属性。

jsFiddle demo

【讨论】：

当其中一位父母拥有overflow: hidden 时，此解决方案将不起作用。我仍在试图弄清楚如何
如果position: relative; 位于overflow: hidden; 元素的单独父元素上，这将起作用。见jsfiddle.net/thirdender/h5sn10cx 和codepen.io/indamix/pen/drtKh
感谢您的解释和jsfiddle。但是当您还原positionRelative 和overflowHidden 时会发生中断（意思是在我的页面中，有一个带有overflow:hidden 的父元素）。所以我最终要做的是使用position: fixed 作为弹出容器，然后使用javascript 将其放置到我想要的位置。这并不理想，但不幸的是我认为没有纯 CSS 方式。