CSS:如何将div放在彼此之上

Question

看看这个小提琴

我试图将div #popup放在页面的底部,重叠任何以前的内容和

我不确定,但我认为position: absolute在这种情况下不起作用,至少不是我实现它的方式.

我该怎么办？

Answer 1

使用position: absolute像这样的弹出窗口的关键是确保容器设置为position: relative.此外,您需要设置z-index以确保弹出窗口显示在内容上方,并使用top属性设置位置.

要满足弹出窗口宽度的要求,您可以设置 width: 100%

#content {
  cursor: pointer;
  position: relative;
}
#popup {
  display: none;
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
}

请在此处查看更新的小提琴:https://jsfiddle.net/xsxo0xmd/18/

从技术上讲,您可以使用position: absolute任何未设置的容器position : static(位置的默认值),如https://developer.mozilla.org/en-US/docs/Web/CSS/position所述

绝对定位的元素相对于最近定位的祖先(非静态)定位.如果定位的祖先不存在,则使用初始容器.