css - 无法将 div 一个放在另一个下面

Question

我正在尝试安排我的 <div>一个在另一个下面，但它们仍然在同一条线上，我尝试使用 row和 col方法，但仍然无效，SO 上的答案也无效。

目前我的代码是这样的

.dragAndDropBox{
    position: absolute;
    width: 80%;
    height: 100%;
    border: 1px solid #fff;
    background-color: gainsboro;
    border-radius: 5px;
}

.dragAndDropBox:hover{
    position: absolute;
    width: 80%;
    height: 100%;
    border: 1px solid #fff;
    background-color: gray;
    border-radius: 5px;
}

.dragAndDropBox .dragAndDropUpload{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
}


.dragAndDropBox .dragAndDropProgressBar{
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 10%;
    outline: none;
}

.dragAndDropBox .dragAndDropText{
    padding-top: 2%;
    text-align: center;
    line-height: 1rem;
    color: #3b3b3b;
    font-family: Arial
}

<div class="uploadBox w-100">
    <div class="uploadDropBox">
        <div class="dragAndDropBox">
            <input
                accept="image/*"
                class="dragAndDropUpload"
                type="file"
            />
            <div class="dragAndDropText">Drag / Browse</div>
            <div
                bsstyle="success"
                class="dragAndDropProgressBar mt-1 progress">
                <div
                    role="progressbar"
                    class="progress-bar progress-bar-striped"
                    style="width: 0%;"
                    aria-valuenow="0"
                    aria-valuemin="0"
                    aria-valuemax="100"
                />
            </div>
        </div>
    </div>
    <div class="uploadedBox w-100">
        <div>Filename Delete View</div>
    </div>
</div>

我正在使用 Bootstrap 4.3.1

Answer 1

<div>我们有position: absolute这使它们彼此重叠。

我建议添加 position: relative至 .dragAndDropBox所以所有绝对定位的元素都有一个相对元素来引用。

这是 fiddle :https://jsfiddle.net/yjdkne3b/

.dragAndDropBox {
  position: relative;
  width: 80%;
  height: 200px;
  border: 1px solid #fff;
  background-color: gainsboro;
  border-radius: 5px;
}

.dragAndDropBox:hover {
  background-color: gray;
}

.dragAndDropBox .dragAndDropUpload {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

.dragAndDropBox .dragAndDropProgressBar {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 10%;
  outline: none;
}

.dragAndDropBox .dragAndDropText {
  padding-top: 2%;
  text-align: center;
  line-height: 1rem;
  color: #3b3b3b;
}

<div class="uploadBox w-100">
  <div class="uploadDropBox">
    <div class="dragAndDropBox">
      <input accept="image/*" class="dragAndDropUpload" type="file" />
      <div class="dragAndDropText">Drag / Browse</div>
      <div bsstyle="success" class="dragAndDropProgressBar mt-1 progress">
        <div role="progressbar" class="progress-bar progress-bar-striped" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
      </div>
    </div>
  </div>
  <div class="uploadedBox w-100">
    <div>Filename Delete View</div>
  </div>
</div>

我希望这是您正在寻找的解决方案。

此外，您不必在悬停时重复元素的属性。如果只有背景在悬停时发生变化，那么只改变背景是可以的，其他属性将保持不变。 :)