Div位于另一个div的角落

Question

使用代码，我可以将div2放在div1的右下角， HTML：

        <div id="div1">
            <p>text</p>
            <p>text2</p>
            <div id="div2">div2</div>
        </div>

的CSS：

        #div1 {
            background: green;
            width: 100px;
            border: 2px solid green;
            position: relative;
        }

        #div2 {
            background: red;
            width: 50px;
            border: 2px solid red;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

但是如何将div2放在这样的角落：

Answer 1

 #div2 {
      bottom: -25px;
      right: -25px;
 }

25px对应红色正方形的宽度/。

Answer 2

这里是：

    <div id="div1">
        <p>text</p>
        <p>text2</p>
        <div id="div2">div2</div>
    </div>  


   #div1 {
        background: green;
        width: 100px;
        border: 2px solid green;
        position: relative;
    }

    #div2 {
        background: red;
        width: 50px;
        border: 2px solid red;
        position: absolute;
        bottom: 0px;

        z-index: 2;
        left:60%;
    }

Answer 3

这个问题有一个非常简单的解决方案。首先，您从position: absolute删除#div2。

然后，您在height上提供固定的95px #div1。

之后，您只需将margin-left设置为70px上的#div2。

这是一个工作片段。

＆＃13;

＆＃13;

#div1 {
  background: green;
  width: 100px;
  height: 95px;
  border: 2px solid green;
  position: relative;
}

#div2 {
  background: red;
  width: 50px;
  border: 2px solid red;
  margin-left: 70px;
}

＆＃13;

<div id="div1">
  <p>text</p>
  <p>text2</p>
  <div id="div2">div2</div>
</div>

＆＃13;

＆＃13;

＆＃13;