Question

如何在不使用绝对定位的情况下使两个div正常地相互叠加？我需要它留在父级中，以便当父级移动或调整其大小时也一样

代码：（使用Bootstrap 4）

<div class="col outer-col border m-3 p-0">
  <div class="col-content w-100 text-center">
    Text or Image here
  </div>
  <div class="btn-group w-100 col-btns">
    <button class="btn w-50 btn-outline-secondary rmv-col">
      Remove
    </button>
    <button class="btn w-50 btn-outline-secondary edit-col">
      Edit
    </button> 
  </div>
</div>

因此，我试图使按钮组（.col-btns）覆盖他的兄弟姐妹.col-content，在保持他对父容器的引用的同时，这有可能吗？

我知道我可以使用负的上边距，但是该边距的值必须等于其当前高度，因为它会变化，并且它的高度必须与它的父级高度也相等，这有可能吗？ / p>

提琴：http://jsfiddle.net/8as9dmf2/

这是为什么我需要它来保留其父母的参考（我的实际情况）的一个示例：http://jsfiddle.net/n0m4cu5s/15/

也许只能用Javascript完成吗？

Answer 1

您可以将容器.outer-col设置为网格容器。

然后，您可以将内容和按钮分配到相同的grid-row和grid-column。

示例：

.outer-col {
  display: grid;
}

.col-content,
.col-btns {
  grid-column: 1/-1;
  grid-row: 1;
  transition: opacity .5s ease;
}

.col-btns {
  opacity: 0;
}

.outer-col:hover .col-btns {
  opacity: .75;
}

.outer-col:hover .col-content {
  opacity: 0;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col outer-col border m-3 p-0">
  <div class="col-content w-100 text-center">
    Text or Image here
  </div>
  <div class="btn-group w-100 col-btns">
    <button class="btn w-50 btn-outline-secondary rmv-col">
      Remove
    </button>
    <button class="btn w-50 btn-outline-secondary edit-col">
      Edit
    </button>
  </div>

</div>

Answer 2

我相信position: absolute;将在这里完成工作。

下面的代码会将您的.col-btns置于其父级的中心。

.content-group .col-btns {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

因此，您可以通过更改top和/或tranform的值来将按钮放置在任意位置。

.col-btns{
  opacity : 0;
}
.outer-col:hover .col-btns{
  opacity : .75;
  transition : opacity .5s ease;
}
.content-group .col-btns {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Just to show an example */
.content-group.small {
  height: 100px;
}
.content-group.med {
  height: 200px;
}
.content-group.big {
  height: 300px;
}

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col outer-col border m-3 p-0 content-group">
  <div class="col-content w-100 text-center">
    Text or Image here
  </div>
  <div class="btn-group w-100 col-btns">
    <button class="btn w-50 btn-outline-secondary rmv-col">
      Remove
    </button>
    <button class="btn w-50 btn-outline-secondary edit-col">
      Edit
    </button> 
  </div>

</div>
<div class="col outer-col border m-3 p-0 content-group small">
  <div class="col-content w-100 text-center">
    Text or Image here small
  </div>
  <div class="btn-group w-100 col-btns">
    <button class="btn w-50 btn-outline-secondary rmv-col">
      Remove
    </button>
    <button class="btn w-50 btn-outline-secondary edit-col">
      Edit
    </button> 
  </div>

</div>
<div class="col outer-col border m-3 p-0 content-group med">
  <div class="col-content w-100 text-center">
    Text or Image here medium
  </div>
  <div class="btn-group w-100 col-btns">
    <button class="btn w-50 btn-outline-secondary rmv-col">
      Remove
    </button>
    <button class="btn w-50 btn-outline-secondary edit-col">
      Edit
    </button> 
  </div>

</div>
<div class="col outer-col border m-3 p-0 content-group big">
  <div class="col-content w-100 text-center">
    Text or Image here large
  </div>
  <div class="btn-group w-100 col-btns">
    <button class="btn w-50 btn-outline-secondary rmv-col">
      Remove
    </button>
    <button class="btn w-50 btn-outline-secondary edit-col">
      Edit
    </button> 
  </div>

</div>

在不离开父级的情况下覆盖div

2 个答案: