Question

我正在尝试通过Bootstrap / Popper.js创建纯CSS弹出窗口。

只要父.wrapper元素大于.popover元素，这里的代码就可以正常工作-弹出框居中。但是，如果将屏幕缩小到足以使弹出框内的table保持.popover大于父窗口的大小，事情就会开始向右倾斜，三角形将不再居中。当父项小于子项时，是否可以将绝对定位的子项居中？

奖金问题-如何在父::after div后面的.popover三角形Z索引后面使它的阴影不像现在这样显示？

.container {
  width: 80%;
  margin: auto;
}

.container>table {
  width: 40%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
}

.text-center {
  text-align: center;
}

.wrapper {
  /* webkit flicker fix */
  -webkit-transform: translateZ(0);
  /* webkit text rendering fix */
  -webkit-font-smoothing: antialiased;
}

.wrapper .popover {
  background: #FFF;
  border: 4px solid #EEE;
  border-radius: 3px;
  font-size: 80%;
  font-family: monospace;
  bottom: 100%;
  left: 50%;
  margin-left: -50%;
  display: block;
  margin-bottom: 5px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  transition: all .25s ease-out;
  box-shadow: 6px 6px 9px 1px rgba(0, 0, 0, 0.75);
}


/* This bridges the gap so you can mouse into the tooltip without it disappearing */

.wrapper .popover:before {
  bottom: -20px;
  content: "";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

.wrapper .popover:after {
  content: "";
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  bottom: -11.07106781187px;
  margin-left: -7.07106781187px;
  background: #EEE;
  border-right: 4px solid #EEE;
  border-bottom: 4px solid #EEE;
  border-radius: 3px;
  transform: rotate(45deg);
  z-index: -1;
  box-shadow: 6px 6px 9px 1px rgba(0, 0, 0, 0.75);
}

.wrapper:hover .popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0px);
}

.wrapper .popover table,
.wrapper .popover th,
.wrapper .popover td {
  border: none;
}

.wrapper .popover table {
  text-transform: uppercase;
  text-align: left;
}

.wrapper .popover td {
  padding: 5px;
}

.wrapper .popover td:nth-child(1) {
  font-weight: bold;
  text-align: right;
}

.wrapper .popover tr:nth-child(even) {
  background: #EEE;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test Popover</title>
</head>

<body>
  <div class="container">
    <h1>Need Some Space for the Popup to Stay On Screen</h1>
    <h2>Filling More Vertical Space</h2>
    <table>
      <thead>
        <tr>
          <th>Some</th>
          <th>Data</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>More</td>
          <td>Data</td>
        </tr>
        <tr>
          <td class="wrapper text-center">
            <i>Popup!</i>
            <div class="popover">
              <table>
                <tbody>
                  <tr>
                    <td>Complete</td>
                    <td>70%</td>
                  </tr>
                  <tr>
                    <td>Noise</td>
                    <td>blorp</td>
                  </tr>
                  <tr>
                    <td>Status</td>
                    <td>magical</td>
                  </tr>
                  <tr>
                    <td>UUID</td>
                    <td>FCC15A57-440F-40F6-A7E5-BF708838028F</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
          <td>Data</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

绝对定位的孩子以较小的父母为中心

0 个答案: