相对和绝对位置，保证金底部为 0

Question

我试图将 3 号图片放在页面底部，但它不起作用。我也使用了位置固定和粘性，但它也不起作用。

.boxes {
    position: absolute;
}
.downa {
    position: relative;
    margin-bottom: 0;
    bottom: 0;
    left: 0px;
}
.topa {
    position: relative;
    top: 0px;
    left: 0px;
}

<div class="boxes">
  <center>
    <img class="topa" height="50" src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-md.png" width="50" />
  </center>
  
  <center>
    <img class="downa" height="50" src="http://www.clker.com/cliparts/g/b/d/Y/s/2/blue-number-3-md.png" width="50" />
  </center>
</div>

如何将 3 号图片放在页面底部？

Answer 1

向“3”图像（如“.foo”）的父级添加 class，而不是强加 "fixed" 专有性：

.boxes{
    position:absolute;
    }
    .downa{
    position:relative;
    margin-bottom: 0;
    bottom: 0;
    left: 0px;
    }
    .topa{
    position:relative;
    top:0px;
    left: 0px;
    }
.foo {
    position:fixed;
    bottom:0
}

<div class="boxes">
<center>
<img class="topa" height="50" src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-md.png" width="50" />
</center>
<center class="foo">
<img class="downa" height="50" src="http://www.clker.com/cliparts/g/b/d/Y/s/2/blue-number-3-md.png" width="50" />
</center>
</div>

http://jsfiddle.net/u6Lg9tns/

我假设您正在寻找粘性页脚；如果您只想根据父元素的实际高度进行定位；您应该使用 Javascript（或者更可能是 JQuery）来检查元素的实际大小（如果是动态的）并设置正确的定位值...

Answer 2

试试这个 .boxes{position:relative;} .downa{position:absolute; bottom:0；左：0px； } .topa{position:absolute;top:0px;left:0px;}

相对和绝对位置，保证金底部为 0

Position relative and absolute with margin bottom 0

html

css

css-position