如何定位一个元素,使其在前一个兄弟元素的下方居中显示

huangapple go评论68阅读模式
英文:

How to position an element so that it is centered under its previous sibling

问题

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}

.tooltip:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #555;
  z-index: -1;
}
英文:

I want to center a speech bubble-esque tooltip element under a link. Here is my current code to do so:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}

.tooltip:before {
  content: &#39;&#39;;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #555;
  z-index: -1;
}

<!-- language: lang-html -->

Up ahead is a

&lt;a href=&quot;#&quot;&gt;
  Button text
&lt;/a&gt;

&lt;div class=&quot;tooltip-container&quot;&gt;
  &lt;div class=&quot;tooltip&quot;&gt;
    Tooltip explanation of button
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

It looks like this

如何定位一个元素,使其在前一个兄弟元素的下方居中显示

But I would like it to look like this

如何定位一个元素,使其在前一个兄弟元素的下方居中显示

The only reason I made the .tooltip-container div is to have a positioned ancestor for .tooltip so that .tooltip can be position: absolute, but despite having that "anchor" in the page I can't figure out a way to center the second child inside of the first one. My ideal HTML would only be:

&lt;a href=&quot;#&quot;&gt;
  Button text
&lt;/a&gt;

&lt;div class=&quot;tooltip&quot;&gt;
  Tooltip explanation of button
&lt;/div&gt;

and I only want to apply styling rules to these two elements, not their parent. How can I achieve this?

答案1

得分: 3

只需将 a 移至 .tooltip-container

英文:

Just move a to .tooltip-container

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}

.tooltip:before {
  content: &#39;&#39;;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #555;
  z-index: -1;
}

<!-- language: lang-html -->

Up ahead is a



&lt;div class=&quot;tooltip-container&quot;&gt;
  &lt;a href=&quot;#&quot;&gt;
    Button text
  &lt;/a&gt;
  &lt;div class=&quot;tooltip&quot;&gt;
    Tooltip explanation of button
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 2

在遥远的未来,你可以使用新的锚点定位:https://drafts.csswg.org/css-anchor-position-1/#anchoring

实际上目前没有浏览器支持,但我为未来留下了答案。

.tooltip {
  position: absolute;
  bottom: anchor(--my-anchor 100%);
  left: anchor(--my-anchor 50%);
  transform: translate(-50%,120%);
  z-index: 1;
  border: 6px solid #0000;
  background: 
    linear-gradient(#555 0 0) padding-box,
    conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 0.5em;
}

#my-anchor {
  anchor-name: --my-anchor;
}

直到那时,你可以将工具提示放在链接内部。

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
  border: 6px solid #0000;
  background: 
    linear-gradient(#555 0 0) padding-box,
    conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 0.5em;
}

a {
 position: relative;
}
Up ahead is a
<a href="#">
  Button text
  <div class="tooltip">
    Tooltip explanation of button
  </div>
</a>
英文:

In a far future you can use the new anchor positioning : https://drafts.csswg.org/css-anchor-position-1/#anchoring

No browser support for this actually but I leave the answer for the future

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.tooltip {
  position: absolute;
  bottom: anchor(--my-anchor 100%);
  left: anchor(--my-anchor 50%);
  transform: translate(-50%,120%);
  z-index: 1;
  border: 6px solid #0000;
  background: 
    linear-gradient(#555 0 0) padding-box,
    conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 0.5em;
}

#my-anchor {
  anchor-name: --my-anchor;
}

<!-- language: lang-html -->

Up ahead is a
&lt;a href=&quot;#&quot; id=&quot;my-anchor&quot;&gt;
  Button text
&lt;/a&gt;

&lt;div class=&quot;tooltip&quot; anchor=&quot;my-anchor&quot;&gt;
   Tooltip explanation of button
&lt;/div&gt;

<!-- end snippet -->


Until then, you can put the tooltip inside the link

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
  border: 6px solid #0000;
  background: 
    linear-gradient(#555 0 0) padding-box,
    conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 0.5em;
}

a {
 position: relative;
}

<!-- language: lang-html -->

Up ahead is a
&lt;a href=&quot;#&quot;&gt;
  Button text
&lt;div class=&quot;tooltip&quot;&gt;
   Tooltip explanation of button
&lt;/div&gt;
&lt;/a&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月31日 21:24:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75899050.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定