CSS로 디자인 된 두 개의 div를 텍스트 거품처럼 보이도록 오버레이 / 겹치는 방법은 무엇입니까?

내 주요 문제는 모든 조건에서 전경 버블 (파란색)을 배경 버블의 약간 아래와 오른쪽에 배치하는 방법입니다.

나는 특히 다음과 같은 방법을 사용하여 객체를 서로 겹치는 다른 방법으로 놀아 보았습니다.

1. 마이너스 마진으로 놀기
2. 절대 / 상대 위치 및 Z- 색인

그러나 "모든 조건"에서 작동하고 텍스트 거품을 "전체"로 유지하는 하나의 조합을 얻을 수 없습니다. (아래 참고 참조)

특히 내가 직면 한 조건은 다음과 같습니다.

1. 다른 텍스트 길이 --- 현재 "일부 제목"으로 작성된 텍스트가 자동으로 생성되고 크기가 매우 클 수 있으므로 (즉, 문자 수) 풍선이 다른 줄 수 (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