求助：如何将#needQuoteWrap定位在固定定位父元素#sideContactWrap底部？

我来帮你搞定这个定位难题！你遇到的#needQuoteWrap设置position:absolute后消失的问题，大概率是因为定位的参考对象没搞对，或者缺少关键的定位属性。咱们一步步来解决：

问题根源分析 #

你给内部容器加了position:relative和height:100%，但如果这个容器的父元素（也就是#sideContactWrap）没有明确的定位上下文，或者你的#needQuoteWrap没设置bottom:0这类锚定属性，就会导致元素“消失”——要么是相对于视口定位到了容器外面，要么是没有锚定到底部位置。

最简单的解决方案 #

其实不用额外加内部容器，直接给#sideContactWrap设置position:relative，让它成为内部元素的定位参考，然后给#needQuoteWrap加上absolute定位并锚定到底部即可：

#sideContactWrap {
  background: #EDEDED;
  width: 30%;
  height: 100vh;
  position: fixed;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  position: relative; /* 新增：让子元素以它为定位基准 */
}

#needQuoteWrap {
  position: absolute;
  bottom: 0; /* 锚定到底部 */
  left: 0;
  width: 100%; /* 撑满容器宽度 */
  /* 可以根据需求添加样式，比如背景、内边距 */
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box; /* 避免padding撑破宽度 */
}

如果必须保留内部容器的情况 #

要是你因为布局需求必须保留那个内部容器，那要确保：

• 内部容器设置position:relative和height:100%，并且#sideContactWrap的高度是明确的（你已经设置了100vh，满足要求）
• #needQuoteWrap相对于这个内部容器定位，同样设置bottom:0、left:0、width:100%

示例代码：

#sideContactWrap {
  background: #EDEDED;
  width: 30%;
  height: 100vh;
  position: fixed;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.inner-container {
  position: relative;
  height: 100%;
  /* 内部容器的其他样式 */
}

#needQuoteWrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

这样设置后，#needQuoteWrap就会稳稳地贴在#sideContactWrap的底部啦！

内容的提问来源于stack exchange，提问作者Paul