Question

我想知道如何放置一个div框（我想放置一个图像），使它出现在中间底部另一个div的顶部。

enter image description here

我正在尝试以下代码：

<html>
<body>
<style type="text/css">
.outer {
    width: 350px;
    height: 350px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
<div class="outer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque, neque ut ultrices posuere, velit arcu aliquam dui, id rutrum justo leo nec purus. Donec aliquet justo a est iaculis id porta nulla pulvinar. Proin quis turpis vitae augue volutpat volutpat. Donec volutpat accumsan urna, id vulputate augue euismod eu. In vitae libero tortor. Integer lacinia, turpis vel egestas ornare, nisi libero tempus orci, non imperdiet erat nulla malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
   <div class="inner"></div>
</div>
</body>
</html>

Answer 1

内部div上的绝对定位和自动边距的组合将起作用。您还需要为外部div设置相对位置

.outer {
  width: 350px;
  height: 350px;
  position: relative;
  border: 1px solid black;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* both left AND right must be set to 0 */
  margin: 0 auto;
}

jsFiddle DEMO

Answer 2

.outer {
    width: 350px;
    height: 350px;
    position:relative;
    border: 1px #bbb solid;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
    position:absolute;
    left: 130px;
    bottom:0;
}

DEMO

Answer 3

尝试类似的事情：jsfiddle

它会帮助你根据需要设置div。

.outer {
    width: 350px;
    height: 350px;
    position: relative;
    background-color: yellow;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
}

为清楚起见，我在外部div中添加了背景。

Answer 4

如果你有两个div的精确坐标，那真的很容易。

在你的例子中简单地把

position: relative;
top: 250px;
left: 125px;

或类似的东西，它会做到这一点。

Answer 5

#outer {
    width: 350px;
    height: 350px;
    position: relative;
    z-index: 1;
}

#inner {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    bottom: 0px;
    left: 110px;
    z-index: 2;
}

将div放在另一个div的底部

5 个答案: