相对于图标位置定位 div答案

【问题标题】：Position div relatively to icon position相对于图标位置定位 div
【发布时间】：2016-01-14 21:06:01
【问题描述】：

当用户将鼠标悬停在我网站上名称旁边的 V 形图标上时，会出现一个带有选项的 div。

问题：名称可以有不同的长度并且无论名称有多长，我都想在 V 形下方显示 div。

这是我的代码：

HTML

<div class='settings'><i class='icon ion-chevron-down'></i></div>
<div class='settings-wrapper'>
    <ul class='settings-bubble'>
        <li>Bearbeiten</li> 
        <li>Löschen</li>
    </ul>
</div>

SCSS

// The chevron icon 
.settings {
    display: inline;
    position: relative;
    padding: .1em 0 0 .5em;
    opacity: 0; // I display the chevron on hover using jquery
}

// The options bubble
.settings-wrapper { 
    position: relative; 
}

.settings-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 .6em;
    opacity: 0;
    z-index: 9999;
    li {
        position: relative;
        display: block;
        a { float: left; }
    }
}

我会非常感谢任何形式的帮助！

如果我将left: 0 更改为right: 0，它看起来像这样：

【问题讨论】：

糟糕，将其添加为答案。
如果我正确理解了这个问题，您可以使用包装器（如您所见）并使用 right: 0; 而不是左。它应该与包装器的右侧对齐。
谢谢！但那也太对了！而且我不能将名称的宽度设置为固定的，因为它的长度可以在 2 到 64 个字符之间。
这是因为您的整个内容没有被包装，只有您的 bubble 被包装。如果您在包装器中包含 settings div，它应该可以正常运行。所以
或类似的东西。甚至可能需要另一个包装来包含所有内容。
如果可能，创建一个问题演示..

标签： javascript jquery css sass css-position

【解决方案1】：

当图标悬停时，有一个显示 div 的事件处理程序。在该处理程序中，您可以检查图标的 x 和 y 坐标。显示 div 时，可以修改其样式以相对于图标定位。例如：

var chevron = document.getElementById('chevron');
var popup = document.getElementById('popup');

chevron.addEventListener('mouseover', function(e) {
  popup.classList.remove('hidden');
  popup.style.left = e.target.offsetLeft + 'px';
});

chevron.addEventListener('mouseout', function(e) {
  popup.classList.add('hidden');
});

.hidden {
  display: none;  
}

#popup {
  position: absolute;
  border: 1px solid #000;
}

<h1 contenteditable="true">Some long title <span id="chevron">></span></h1>

<div id="popup" class="hidden">popup</div>

我将标题保留为可编辑，以便您可以将其延长并查看弹出窗口的更改位置。

【讨论】：

真是太好了！！有没有办法使用类而不是 id？因为我在 foreach 循环中使用我的代码。对不起，我对这一切真的很陌生。 var chevron = document.getElementByClass('chevron');?
您可以使用 document.querySelector('.chevron') 按其类定位元素，假设它是文档中具有该类名称的第一个元素。

【解决方案2】：

在.settings-bubble 中将left: 0; 更改为right: 0;，它将粘在父项的右侧而不是左侧。

编辑：诀窍是将包含气泡的 div 添加到包含任意长度字符串的 div 中，并将该 div 内的气泡附加到内部右侧，如 this fiddle 所示。

【讨论】：

我加了一个小提琴！感谢您迄今为止所做的所有努力！