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

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

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

问题

  1. .tooltip-container {
  2.   position: relative;
  3.   display: inline-block;
  4. }
  6. .tooltip {
  7.   position: absolute;
  8.   z-index: 1;
  9.   background-color: #555;
  10.   color: #fff;
  11.   padding: 4px 8px;
  12.   border-radius: 4px;
  13.   white-space: nowrap;
  14.   top: 100%;
  15.   left: 50%;
  16.   transform: translateX(-50%);
  17.   margin-top: 0.5em;
  18. }
  20. .tooltip:before {
  21.   content: '';
  22.   position: absolute;
  23.   top: -5px;
  24.   left: 50%;
  25.   transform: translateX(-50%) rotate(45deg);
  26.   width: 10px;
  27.   height: 10px;
  28.   background-color: #555;
  29.   z-index: -1;
  30. }
英文:

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 -->

  1. .tooltip-container {
  2.   position: relative;
  3.   display: inline-block;
  4. }
  6. .tooltip {
  7.   position: absolute;
  8.   z-index: 1;
  9.   background-color: #555;
  10.   color: #fff;
  11.   padding: 4px 8px;
  12.   border-radius: 4px;
  13.   white-space: nowrap;
  14.   top: 100%;
  15.   left: 50%;
  16.   transform: translateX(-50%);
  17.   margin-top: 0.5em;
  18. }
  20. .tooltip:before {
  21.   content: &#39;&#39;;
  22.   position: absolute;
  23.   top: -5px;
  24.   left: 50%;
  25.   transform: translateX(-50%) rotate(45deg);
  26.   width: 10px;
  27.   height: 10px;
  28.   background-color: #555;
  29.   z-index: -1;
  30. }

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

  1. Up ahead is a
  3. &lt;a href=&quot;#&quot;&gt;
  4.   Button text
  5. &lt;/a&gt;
  7. &lt;div class=&quot;tooltip-container&quot;&gt;
  8.   &lt;div class=&quot;tooltip&quot;&gt;
  9.     Tooltip explanation of button
  10.   &lt;/div&gt;
  11. &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:

  1. &lt;a href=&quot;#&quot;&gt;
  2.   Button text
  3. &lt;/a&gt;
  5. &lt;div class=&quot;tooltip&quot;&gt;
  6.   Tooltip explanation of button
  7. &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 -->

  1. .tooltip-container {
  2.   position: relative;
  3.   display: inline-block;
  4. }
  6. .tooltip {
  7.   position: absolute;
  8.   z-index: 1;
  9.   background-color: #555;
  10.   color: #fff;
  11.   padding: 4px 8px;
  12.   border-radius: 4px;
  13.   white-space: nowrap;
  14.   top: 100%;
  15.   left: 50%;
  16.   transform: translateX(-50%);
  17.   margin-top: 0.5em;
  18. }
  20. .tooltip:before {
  21.   content: &#39;&#39;;
  22.   position: absolute;
  23.   top: -5px;
  24.   left: 50%;
  25.   transform: translateX(-50%) rotate(45deg);
  26.   width: 10px;
  27.   height: 10px;
  28.   background-color: #555;
  29.   z-index: -1;
  30. }

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

  1. Up ahead is a
  5. &lt;div class=&quot;tooltip-container&quot;&gt;
  6.   &lt;a href=&quot;#&quot;&gt;
  7.     Button text
  8.   &lt;/a&gt;
  9.   &lt;div class=&quot;tooltip&quot;&gt;
  10.     Tooltip explanation of button
  11.   &lt;/div&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 2

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

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

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

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

  1. .tooltip {
  2.   position: absolute;
  3.   top: 100%;
  4.   left: 50%;
  5.   transform: translate(-50%);
  6.   z-index: 1;
  7.   border: 6px solid #0000;
  8.   background: 
  9.     linear-gradient(#555 0 0) padding-box,
  10.     conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  11.   color: #fff;
  12.   padding: 4px 8px;
  13.   border-radius: 12px;
  14.   white-space: nowrap;
  15.   margin-top: 0.5em;
  16. }
  18. a {
  19.  position: relative;
  20. }
  1. Up ahead is a
  2. <a href="#">
  3.   Button text
  4.   <div class="tooltip">
  5.     Tooltip explanation of button
  6.   </div>
  7. </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 -->

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

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

  1. Up ahead is a
  2. &lt;a href=&quot;#&quot; id=&quot;my-anchor&quot;&gt;
  3.   Button text
  4. &lt;/a&gt;
  6. &lt;div class=&quot;tooltip&quot; anchor=&quot;my-anchor&quot;&gt;
  7.    Tooltip explanation of button
  8. &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 -->

  1. .tooltip {
  2.   position: absolute;
  3.   top: 100%;
  4.   left: 50%;
  5.   transform: translate(-50%);
  6.   z-index: 1;
  7.   border: 6px solid #0000;
  8.   background: 
  9.     linear-gradient(#555 0 0) padding-box,
  10.     conic-gradient(from 135deg at top,#555 90deg,#0000 0) top/100% 50% no-repeat border-box;
  11.   color: #fff;
  12.   padding: 4px 8px;
  13.   border-radius: 12px;
  14.   white-space: nowrap;
  15.   margin-top: 0.5em;
  16. }
  18. a {
  19.  position: relative;
  20. }

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

  1. Up ahead is a
  2. &lt;a href=&quot;#&quot;&gt;
  3.   Button text
  4. &lt;div class=&quot;tooltip&quot;&gt;
  5.    Tooltip explanation of button
  6. &lt;/div&gt;
  7. &lt;/a&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定