如何将一个 div 锚定到另一个 div 并让它们保持响应答案

【问题标题】：How to anchor one div to another and keep them responsive如何将一个 div 锚定到另一个 div 并让它们保持响应
【发布时间】：2021-08-04 21:06:11
【问题描述】：

我有一个内置在 vue.js 中的 UI，我需要向其中添加工具提示。我需要将工具提示放置在 UI 中特定 div 的左侧或右侧。通过将工具提示设置为绝对位置，我已经能够获得我想要的外观，但这不是响应式的，因此在某些屏幕上，工具提示与目标 div 不对齐。

UI 相当复杂，所以我尽量避免使用 flexbox/grid 重建布局。我正在寻找一种使用 javascript 将工具提示“锚定”到其相应 div 的方法。

https://codepen.io/joeymorello/pen/ZEeWmGd 这里我正在使用 append to 和 insertBefore，但我仍然需要使用 CSS 微调每个工具提示位置。有没有办法将一个 div 锚定在另一个 div 旁边，以便工具提示始终跟随其父 div？

const head = document.querySelector('.head') 
const body = document.querySelector('.body') 

const toolTipOne = document.querySelector('.tool-tip-1')
const toolTipTwo = document.querySelector('.tool-tip-2')

$(toolTipOne).appendTo(head);
$(toolTipTwo).insertBefore(body);

【问题讨论】：

标签： javascript jquery css vue.js tooltip

【解决方案1】：

将position: relative 应用到.body 并在其中附加工具提示。然后，您可以使用top、left 等轻松地使用absolute 相对于.body 的位置定位它：

https://codepen.io/tilwinjoy/pen/QWpNJdY

【讨论】：

【解决方案2】：

为什么不使用纯 CSS 呢？您可以在元素上使用相对位置，然后使用其伪 ::after 元素并将其位置设置为绝对位置。然后调用 left、top、right 和/或 bottom 属性，将您的伪元素放置在相对于已设置相对位置的父级的页面上。

// example of how to change the content of a pseudo tag with JS and CSS variables using the root element

let root = document.documentElement

let headTTInfo = 'Maybe you want to change the Head tooltips content via JS?'
let bodyTTInfo = 'Here is content for your body elements tool tip generated with JS.'

root.style.setProperty('--body', `"${bodyTTInfo}"`)
root.style.setProperty('--head', `"${headTTInfo}"`)

:root {
  --head: 'this is content for your head elements tool tip';
  --body: 'this is content for your body elements tool tip'
}
  /* This min-width on the body will ensure that your absolutely positioned element 
     is within the body and its display is not completely taken out of the 
     viewable container,   
     125px(tooltip offset) + 500px(width of parents) + 125px(tooltip offset) = 750
     gives us 10px padding on each side if screen width less than the width of the 
     parents elements, we do this because postion absolute takes its positioned elements
     out of the normal flow of the document. */
body {
  min-width: 770px; 
}

.head {
  margin: 0 auto;
  width: 500px;
  height: 250px;
  background-color: green;
  position: relative;
}

.body {
  margin: 1rem auto;
  width: 500px;
  height: 250px;
  background-color: pink;
  position: relative;
}

.head::after {
  content: var(--head); 
  position: absolute;
  left: -125px;
  top: 40%;
  width: 100px;
  height: auto;
  padding: 5px;
  background-color: teal;
}
.body::after {
  content: var(--body); 
  position: absolute;
  left: 515px;
  top: 40%;
  width: 100px;
  height: auto;
  padding: 5px;
  background-color: orange;
}

<div class="container">
  <div class="head">HEAD</div>
  <div class="body">body</div>
</div>

【讨论】：