如何覆盖/重叠两个用 css 设计的 div 看起来像文本气泡？

Posted 2023-03-06

【中文标题】如何覆盖/重叠两个用 css 设计的 div 看起来像文本气泡？

【英文标题】：How to overlay/overlap two div's designed with css to look like text bubbles?

【发布时间】：2014-07-04 15:22:15

【问题描述】：

我的主要问题是如何让前景气泡（蓝色）在所有情况下都略低于背景气泡的右侧？

我尝试过使用不同的方式将对象重叠在一起......特别是使用以下方式：

玩弄负边距 绝对/相对定位和 z-index

但是，我无法获得一种在“所有条件”下都有效并保持文本气泡“完整”的组合。 （见下文注释）

具体来说，我面临的条件是：

不同的文本长度 --- 当前写入为“某些标题”的文本是自动生成的，并且可能非常大（即字符数），因此气泡需要调整为不同数量的行 (1-5)。 不同的浏览器尺寸 --- 我希望文本气泡根据浏览器的尺寸进行调整，而不是它们之间的距离。

另请注意：

我正在使用最新版本的 Twitter Bootstrap。 我在文本气泡上使用特定的前后伪元素，因此它们的小提示放置在美观的位置。当我尝试上面的第二种方法来解决问题时，这些经常会搞砸。

如果您可以使文本气泡上的提示看起来更好，则可以加分；）

这是我的html：

           <div>
              <div id="head-names">
                <h2>
                  Person A
                </h2>
                <h2>
                  Person B
                </h2>
              </div>
              <div align="center">
                    <h2 class="text-bubble background-bubble">
                      <p>Some Title</p>
                     </h2>
                    <h2 class="text-bubble foreground-bubble">
                      <p>Some Title</p>
                    </h2>
              </div>
          </div>

还有我的 CSS：

           #head-names 
                display:flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap:wrap;
            

            .text-bubble 
                position:relative;
                text-align : center;    
                border-radius:30px;
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                -webkit-box-shadow: 2px 2px 4px #888;
                -moz-box-shadow: 2px 2px 4px #888;
                box-shadow: 2px 2px 4px #888;
                max-width:650px;
                padding: 10px 20px;
                margin: 0 0 20px;
            


            .text-bubble:before 
                content:"";
                position:absolute;
                width: 0;
                height:0;    
                border-style:solid;
            


            .text-bubble:after 
                content:"";
                position:absolute;
                border-style:solid;    
                display:block;
                width: 0;
            

            .foreground-bubble 
                background-color: #ADD8E6;
                border: 6px solid #666;
                left:2%;   
            

            .foreground-bubble:before 
                bottom:100%;
                left:13%;
                border-color: transparent transparent #666 #666;
                border-width: 30px 30px 30px 30px;
            


            .foreground-bubble:after 
                bottom:100%;
                left:15%;
                border-color: transparent transparent #ADD8E6 #ADD8E6;
                border-width: 18px 18px 18px 18px;    
            

            .background-bubble 
                background-color: #fff;
                border: 6px solid #666;
                left:-2%;
                color:transparent;
                margin-bottom:-17%;
            

            .background-bubble:before 
                bottom:100%;
                left:80%;
                border-color: transparent #666 #666 transparent;
                border-width: 30px 30px 30px 30px;
            

            .background-bubble:after 
                bottom:100%;
                left:82.5%;
                border-color: transparent #fff #fff transparent;
                border-width: 18px 18px 18px 18px;    

我的代码可以在这里找到：http://jsfiddle.net/aZ6bE/

链接到一些线框/示例图像，了解我希望如何缩放：http://ge.tt/2puJ7Hh1/v/0?c

【问题讨论】：

你能添加一张你想要的图片吗？

你的意思是这样的吗？ jsfiddle.net/davidpauljunior/kNKX4/19

不，我正在寻找实际上重叠更多的图像。根据您的要求，我添加了一组图片，说明我希望这些对象的理想外观。感谢您的帮助。

也许这可以帮助jsfiddle.net/HGQ25

比较代码时，我发现的唯一区别是 .foreground-bubble:before 的位置从 13% 变为 50px。这是你的意图还是我错过了什么？不幸的是，当浏览器变大时，蓝色前景气泡在白色气泡上方移动的问题（以及随后当浏览器变小时向下太远）仍然存在。此外，foreground-bubble:before 左侧位置的更改也会使其在浏览器调整大小时断开连接。

【参考方案1】：

对于定位，我删除了.background-bubblemargin-bottom:-17%，而是将top:-100px 添加到.foreground-bubble，因为它是position:relative。 我还为包装 div 提供了一个新类“气泡”，并添加了margin-top:50px 以将其进一步向下移动，以免提示与文本冲突。

根据泡泡的提示我改了：

较大三角形的大小 (border-width) 百分比 -> 像素 （背景气泡）左 -> 右

这是JSFiddle

我还建议您将一些 CSS 组合到新的类中以减少冗余。 例如提示中的border-width 和bottom:100%。

【讨论】：

维伦丹克卢卡斯！ Du bist mein 举行。 :) 这解决了我的问题，而且这些提示在像素方面肯定比百分比更好……我知道它看起来有点古怪。给你加分！

我猜两个关键点是将两个气泡分组到“气泡”类中，并以像素而不是百分比工作。否则，是否有某种原则、教训或我应该使用的操作模式会导致我这样做？

您减少冗余的建议似乎是明智的反馈......我实际上一开始并不知道如何实现它 b/ca）我之前没有同时定义两个类/id 和 b）什么时候我试着考虑一下，我对实际创建“新类”的想法很感兴趣，如果某种条件等，它只会引用伪元素之前/之后……然后我想，为什么我不能只保留旧的分类并一次描述多个类……我该怎么做？……哦，是的，我一直在 Twitter Bootstrap css 中看到它！像魔术一样工作：jsfiddle.net/q4gLw/1

嗯...正如您所说，在大多数情况下，将属于一起的事物分组绝对是一个好主意。此外，您必须小心在 css 中使用百分比。正如您所注意到的，它可能会导致相当多的问题。在大多数情况下，我更喜欢 px 或 em。如果您确实需要它来适应窗口大小（或父元素），只需使用百分比即可。如果您这样做，请务必使用浏览器大小来发现任何奇怪的布局错误。