將div放置在右下角

Question

無法弄清楚為什么我的div不在行的右下角。

<div class="row">
<div id="col-xs-4">
  <p>pplplplplp</p>
</div>
<div id="col-md-8 pull-right">
  <p>pplplplplp</p>
</div>
<div id="bottomrightcontainer">
  <p>pplplplplp</p>
</div>
</div>

#bottomrightcontainer{
    background-color: white;
    border: 2px solid white;
    border-radius: 2px;
    z-index: 1;

    position: absolute;
    width: 17%;
    height: 29%;
    right: 0px;
    bottom: 0px;
}

這將其放置在窗口的底部而不是其父行。

Answer 1

position: absolute; 如果您希望它工作，則需要將父級放置在position: relative;

http://jsfiddle.net/5uodkb1u/

.row {
    position: relative;
}

Answer 2

您只是缺少position:relative;

這是因為絕對值是基於最接近的相對父級。 如果沒有父母是親戚，則絕對基於瀏覽器窗口。

的HTML

<div class="row">
<div id="left">
  <p>pplplplplp</p>
</div>
<div id="right">
  <p>pplplplplp</p>
</div>
<div id="bottomrightcontainer">
  <p>pplplplplp</p>
</div>
</div>

的CSS

#bottomrightcontainer{
    background-color: blue;
    border: 2px solid red;
    border-radius: 2px;
    z-index: 1;
    position: absolute;
    width: 17%;
    height: 29%;
    right: 0px;
    bottom: 0px;
}

.row{
    border: 2px solid green;
    position:relative;
}

http://jsfiddle.net/cg8bgvoz/

Answer 3

添加position: relative對於父div應該起作用：

JSFiddle： http : //jsfiddle.net/ABr/Lxwqkvav/

Answer 4

在bottomrightcontainer上方的代碼中，是身體的直接子代。 它會在主體的右下角。 然后也使其相對位置而不是絕對位置

Answer 5

您尚未為類row指定css，這是您的父類。 因此，嘗試添加

.row
{
position: relative;
}

Answer 6

您可以使用html和css進行此操作。 不需要javascript，也不需要jquery和其他復雜的語言即可完成工作。 看到這里： http ： //goo.gl/PnWvUl