如何在父div中使用position：absolute放置这个子div？

Question

我有一个div，我试图以一个盒子的形式放置div。问题是我需要使用position:absolute来保持灵活性。但是当我应用position: absolute时，该框离开了父div。

带

的图片

    .new-div{
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.7);


    /*float: left;*/
    min-width: 3em;
    min-height: 2em;
    max-width: 48ex;
    margin: 2em;
    padding: 1em;
    margin-left: 70%;
    position: absolute;

    word-wrap:break-word;
    top: 52%;

    /*left: 50%;*/
    /*right: -2%;*/
    /*transform: translateX(-50%) translateY(-50%);*/
    border: 1px solid rgb(200, 200, 200);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
}

我删除position: absolute的那一刻它运行正常。

但我需要使用position:absolute。有人可以建议一个解决方法。

Answer 1

父div位置应该是相对的。

<div style='position:relative'>
    <div class='new-div'>
    </div>
</div>