Question

我想在div的右下角放置一些内容，我想出了这个：

#superDiv,
#childDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#childDiv {
  z-index: 30;
  float: right;
  position: bottom;
}

这是我制作的Plunk http://plnkr.co/edit/WaP5Pde7CXnAfnW3QybF?p=preview

缺少什么？

Answer 1

position: bottom不存在。而且你不需要float:right，因为你使用的是绝对位置。

#container {
  width: 100%;
  height: auto;
  position: relative;
}
#superDiv {
  width: 100%;
  height: auto;
}
#childDiv {
  position: absolute;
  bottom: 10px; /* 5px margin-top + 5px margin-bottom */
  right: 0;
}

希望有所帮助。

Answer 2

#childDiv {
    z-index: 30;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 3

将您的代码更改为：

#container {
  width: 100%;
  height: auto;
  position: relative;
}

#superDiv {
  width: 100%;
  height: auto;
  z-index:10;
  position: relative;
}

#childDiv{
  position: absolute;
  bottom: 20px;
  right: 0;
  z-index: 30;
}

Answer 4

我已根据您的需要编辑了您的Plunk。我已从

中删除了#childDiv

#superDiv {
  width: 100%;
  height: 100%;
  position:relative; /* Note the change in position absolute -> relative */
  top: 0;
  left: 0;
}

在此之后我将#childDiv放到：

#childDiv{
  z-index: 30;
  float:right;
  position:absolute;
  right:0;
  bottom:0;
}

将其定位在#superDiv的右下角。

CSS：在Div的右侧带有内容的按钮/文本

4 个答案: