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

Question

我的主要问题是如何让前景气泡(蓝色)在所有条件下都略低于背景气泡的右侧？

我试过用不同的方式将对象重叠在一起...具体使用以下方式:

1. 利用负利润率
2. 绝对/相对定位和 z-index

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

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

1. Different Text Lengths --- 当前作为“Some Title”写入的文本是自动生成的，并且可能非常大(即字符数)，因此气泡需要调整为不同的行数(1-5)。
2. 不同的浏览器大小 --- 我希望文本气泡根据浏览器的大小进行调整，而不是它们之间的距离。

另请注意:

• 我使用的是最新版本的 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

Answer 1

对于定位，我删除了 .background-bubble margin-bottom:-17% 并添加了 top:-100px 到 .foreground-bubble 因为它的 position:relative。我还为包装 div 提供了一个新类“bubbles”并添加了 margin-top:50px 以将其向下移动一点，这样提示就不会与文本发生冲突。

根据气泡的提示我改了:

• 大三 Angular 形的大小(border-width)
• 百分比 -> 像素
• (背景气泡)左 -> 右

这是 JSFiddle

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