Question

css div中定位右下角

我希望将一个div“B”定位到div“A”里面的右下角。
求教如何实现。谢谢！

Answer 1

1、首先我不给div定位来看看两个div在浏览器中是如何显示的，具体的代码如下：

如下图，可以看到两个div在没使用定位的情况下显示的位置，我们可以发现div是个块，自动换行了。

2、相对定位：首先给div2使用相对定位，用position:relative;来实现的，具体的代码如下：

可以看到如下图，div2的位置离div1的位置偏移了上边四十个像素，左边四十个像素。

3、绝对定位：现在来看看绝对定位，使得div1和div2能重叠，具体的代码如下：

如下图是不是发现两个div块重叠了，具体的效果如下图。

4、绝对定位：现在我来使得div1的绝对定位边60px，左边60px，看看执行的效果是什么样子呢？具体的代码如下：

可以看到如下图的执行效果，是不是得出了绝对定位的定位点是浏览器左上角坐标点为(0,0)这个像素点为起点的。

5、div块加文字P:这里为了说明下个定位相关的知识，我先做如下的模型，具体的代码如下：

如下图可以看到文字在div块中，那么我们该如何使得div中文字总是在div块中呢,这里说的是使用绝对定位的情况下。

6、div和文字：将div块设置成绝对定位，看看文字显示的位置，具体的代码如下：

如下图，是不是发现文字没有在div块中了。

7、div绝对定位下块中的文字：这里我要实现div在绝对定定位下，div以及能在块中，具体的代码如下：

上面相对，下面绝对，具体的显示效果如下图。

Answer 2

<style type="text/css">
  .a{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
  }
  .b{
      width: 50px;
      height: 50px;
      background: blue;
      position: absolute;
      right: 0px;
      bottom: 0px;
  }
</style>
<div class="a">
    <div class="b"></div>
</div>

Answer 3

HTML代码

<div class="A">
<div class="B">
我是b
</div>
</div>

css代码：
*{ padding:0; margin:0;}
.A{ position:relative; width:400px; height:400px; border:1px solid #000;}
.B{ position:absolute; right:0px; bottom:0px; width:100px; height:100px; background-color:red;}

Answer 4

<div class="a">
<div class="b"></div>
</div>
<style>
.a{position:relative;width:500px; height:200px;}
.b{position:absolute; width:30px; height:30px;top:0;right:0;background:#333;}
</style>