Question

我希望opaque（命名opac）框位于中间，如内容框（名为continut）

＆＃13;

.tot {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
}

.continut {
  position: relative;
  width: 200px;
  height: 200px;
  z-index: 2;
}

.opac {
  position: relative;
  width: 500px;
  height: 400px;
  z-index: 1;
  opacity: 0.8;
  background-color: #ededed;
}

＆＃13;

<div class="tot">

  <div class="opac"></div>

  <div class="continut">
    <form action="">
      <input type="text" name="un" placeholder="Nume de utilizator">
      <input type="password" name="pw" placeholder="password">
      <input type="submit" name="l" value="Login">
    </form>
  </div>
</div>

＆＃13;

Answer 1

如果我理解正确，我相信您正在尝试垂直对齐 contunut 和 opac div。

我能够通过以下解决方案实现这一目标：

.tot {
  position: relative;
  width: auto;
  height: 900px; //change to whatever height fits your design
}

.abs-v-center {
  margin: auto;
  top: 0; 
  left: 0; 
  bottom: 0; 
  right:0;
}

.opac {
  position: absolute;
  background-color: #ededed;
  height: 400px;
  width: 400px;
  opacity: 0.8;
}

.continut {
  position: absolute;
  height: 200px;
  width: 200px;
}

通过将包装div设置为position: relative并赋予其固定的宽度和高度，您可以通过添加position: absolute将其子项与包装div对齐。

我将定位规则抽象为一个名为.abs-v-center的单独类，并将其应用于两个元素，这些元素应该每个元素都与包装div的中间对齐。

解决方案＃2：

或者，您可以合并flexbox，使垂直对齐变得轻而易举。

.tot {
  display: flex; // set wrapper to display flex
  justify-content: center; // horizontally align children (like margin: 0 auto)
  align-items: center; //vertically align children (flexbox goodness)
  width: auto;
  height: 900px;
}

.opac {
  position: absolute; //set to aboslute to removed from the normal document flow so that elements are not placed next to each other.
  background-color: #ededed;
  height: 400px;
  width: 400px;
  opacity: 0.8;
  z-index: -1; // set z-index to place opac div behind continut div
}

.continut {
  height: 200px;
  width: 200px;
}

If you are new to flexbox checkout this article

如何在中间对齐不透明的盒子

1 个答案: