css - Css / React 语音气泡小部件

Question

您好，我正在尝试制作一个气泡小部件，但我遇到了问题，基本上我需要一个放在另一个上面，如下所示：

但我无法做这样的事情有人可以帮助我吗？

代码：

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="WrapperChat">
        <div class="bubble" />
        <div class="bubble2 b2" />
      </div>
    </div>
  );
}

CSS：

.App {
  font-family: sans-serif;
  text-align: center;
}
body {
  margin: 0;
  padding: 0;
}

.WrapperChat {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: blue;
}

.bubble {
  background-color: #000;
  border-radius: 50px;
  box-shadow: 0px 0px 6px #fff;
  height: 60px;
  margin: 20px;
  width: 60px;
}

.bubble::after {
  background-color: #f2f2f2;
  box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
  content: "\00a0";
  display: block;
  height: 10px;
  left: -10px;
  position: relative;
  bottom: -50px;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 20px;
}

.bubble2 {
  background-color: #000;
  border-radius: 50px;
  box-shadow: 0px 0px 6px #fff;
  height: 80px;
  margin: 20px;
  width: 80px;
}
.bubble2::after {
  background-color: #f2f2f2;
  box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
  content: "\00a0";
  display: block;
  height: 10px;
  right: -60px;
  position: relative;
  top: 70px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 20px;
}
.b2 {
  transform: translateY(-40%);
}

基本上我无法使用翻译正确定位，我无法想象如何切割气球的箭头

例子：

https://codesandbox.io/s/sharp-haslett-tr09n

标签： css

Answer 1

您可以position: absolute在每个气泡元素中设置要处理的z-index

.bubble {
  background-color: #000;
  border-radius: 50px;
  box-shadow: 0px 0px 6px #fff;
  height: 60px;
  margin: 20px;
  width: 60px;

  **position: absolute;
  z-index: 1;**
}

在此处添加后position: absolute，您可以设置top

.bubble2 {
  background-color: #000;
  border-radius: 50px;
  box-shadow: 0px 0px 6px #fff;
  height: 80px;
  margin: 20px;
  width: 80px;
  top: 60px;
  position: absolute;
}

https://codesandbox.io/s/peaceful-snow-e6j8e