将 DIV 容器与页面底部对齐，其中包含可变高度元素

Question

我试图在页面上放置一个元素，以便它始终与页面上的其他控制元素隔开。我希望这个元素位于页面上的任何位置，具体取决于页面上的其他控制元素、用户采取的操作等。这些是八个有效位置：

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_CENTER
RIGHT_CENTER
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

到目前为止，我有 3 个组件元素：1) DIV 容器，2) 应始终位于 DIV 容器顶部的图像，3) 应始终位于 DIV 容器底部的一些文本.我的 CSS 如下所示：

#floatingElement {
    left: 60px;
    top: 11%;
    width: 25%;
    height: 25%;
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

#floatingElement img {
    display: block;
        margin: auto;
    max-width: 95%;
    max-height: 100%;
}

#floatingElement div {
    text-align: center;
    background: rgba(255,255,255,0.5);
    border-radius: 5%;
    box-shadow: 3px 3px 2px #888888;
    font-size: 2vmax;
}

只要元素位于“TOP”或“CENTER”，上述操作就可以完美运行。但是，“BOTTOM”定位会引起问题，我认为是因为容器 DIV 不知何故没有根据第三个（文本 DIV）元素中的文本量考虑其高度。

我怎样才能使元素在选择“BOTTOM”位置时始终与页面底部对齐，以便容器 DIV 包含文本 DIV 的高度（可能会因数量而异该 DIV 中的文本），类似于此图像：

黑色边框是我的窗口，红色框是我的图像，绿色框是文本 DIV。红色和绿色框都在我的容器 DIV 中。

Answer 1

在使用 bottom 进行更改后，您想要的方案无法按预期工作，因为您指定要修复 #floatingElement 的 height（在您的情况下为 25%）。 相对于容器有一个固定值并且不考虑文本 div 的高度，浮动元素的位置在使用bottom 更改时肯定会出现偏移。这是因为bottom 根据元素高度的最底部像素放置元素，在您的情况下，它可能小于足以覆盖整个文本 div 和图像的高度。要明白我的意思，请尝试删除下面对高度的评论并检查 #floatingElement 的元素。

这是一个工作示例，只需单击按钮即可调整 div 的位置（运行时尝试使用全页模式，因为窗口有点小）。

const button = document.querySelector('.adjustPosition')
const addText = document.querySelector('.addText')
const elem = document.querySelector('#floatingElement')
const textDiv = elem.querySelector('.textDiv')

button.addEventListener('click', e => {
  if (elem.classList.contains('topLeft')) {
    elem.classList.add('topCenter')
    elem.classList.remove('topLeft')
  } else if (elem.classList.contains('topCenter')) {
    elem.classList.add('topRight')
    elem.classList.remove('topCenter')
  } else if (elem.classList.contains('topRight')) {
    elem.classList.add('rightCenter')
    elem.classList.remove('topRight')
  } else if (elem.classList.contains('rightCenter')) {
    elem.classList.add('bottomRight')
    elem.classList.remove('rightCenter')
  } else if (elem.classList.contains('bottomRight')) {
    elem.classList.add('bottomCenter')
    elem.classList.remove('bottomRight')
  } else if (elem.classList.contains('bottomCenter')) {
    elem.classList.add('bottomLeft')
    elem.classList.remove('bottomCenter')
  } else if (elem.classList.contains('bottomLeft')) {
    elem.classList.add('leftCenter')
    elem.classList.remove('bottomLeft')
  } else if (elem.classList.contains('leftCenter')) {
    elem.classList.add('topLeft')
    elem.classList.remove('leftCenter')
  } 
})

addText.onclick = () => {
  textDiv.innerText += "Added some more text so that the div can be larger"
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#floatingElement {
  width: 25%;
  /* height: 25%;  This causes the height to be fixed */
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

#floatingElement img {
  display: block;
  width: 100%;
  height: 100px;
  margin: auto;
  object-fit: cover;
}

#floatingElement .textDiv {
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5%;
  box-shadow: 3px 3px 2px #888888;
}

.adjustPosition {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background: #12121299;
  border-radius: 50%;
  cursor: pointer;
}

.addText {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.topLeft {
  top: 10px;
  left: 10px;
}

.topCenter {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.topRight {
  top: 10px;
  right: 10px;
}

.leftCenter {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.rightCenter {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.bottomLeft {
  bottom: 10px;
  left: 10px;
}

.bottomRight {
  bottom: 10px;
  right: 10px;
}

.bottomCenter {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

<div id="floatingElement" class="topLeft">
  <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
  <div class="textDiv">Variable height here because it has a long text</div>
</div>

<div class="adjustPosition"></div>
<div class="addText">Add Text</div>