Jquery 如何在弹出框中固定按钮位置

我有一个弹出框，右上角有一个关闭按钮，看起来像这样。问题是，当水平滚动打开并向右滚动时，它会将位置更改为框的中心，如下所示。如何固定弹出框（div）右上角的按钮

我的css用于按钮位置

.pop > span {
    cursor: pointer;
    color: red;
    position: absolute;
    top: 4%;
    right: 4%;
}

.pop {
    display: none;
    position: absolute;
    top: 10%;
    left: 20%;
    width: 500px;
    height: 400px;
}

我的html

<div class="container pop ui-widget-content"><span><i aria-hidden="true" class="fa fa-times fa-lg"></i></span>
    ...
</div>

---

你是对的，浮子不会像那样工作，但是：

HTML:

---

你是对的，浮子不会像那样工作，但是：

HTML:

---

谢谢大家的帮助。最后，我按照这把小提琴做了修改，并添加了另一个div来包裹内部div

.outer {
    position: absolute;
    width: 98%;
    border:1px solid red;
}
.relative {
    position: relative;
}
.inner {
    height:200px;
    overflow-y:scroll;
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

---

谢谢大家的帮助。最后，我按照这把小提琴做了修改，并添加了另一个div来包裹内部div

.outer {
    position: absolute;
    width: 98%;
    border:1px solid red;
}
.relative {
    position: relative;
}
.inner {
    height:200px;
    overflow-y:scroll;
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

---

弹出窗口是否需要垂直和水平滚动？这似乎有点糟糕。但是如果你真的需要它，那么里面的内容应该有滚动条，而外面的容器应该是关闭的位置输入CSS@ArathiSreekumar是的，因为其中的文本可能很长，并且有很多内容rows@DIEGOCARRASCAL是的，我尝试了一个float:right in.pop>span{}，不起作用。您能否提供设置了宽度的popup容器元素。弹出窗口是否需要有垂直和水平滚动？这似乎有点糟糕。但是如果你真的需要它，那么里面的内容应该有滚动条，而外面的容器应该是关闭的位置输入CSS@ArathiSreekumar是的，因为其中的文本可能很长，并且有很多内容rows@DIEGOCARRASCAL是的，我尝试了一个float:right in.pop>span{}，不起作用。您可以提供设置了宽度的popup容器元素。虽然这个代码片段可以解决这个问题，但确实有助于提高您的文章质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满您的代码，因为这会降低代码和解释的可读性！虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满您的代码，因为这会降低代码和解释的可读性！

    <div class="popCont">
    <span><i aria-hidden="false" class="fa fa-times fa-lg">X</i></span>
    <div class="container pop ui-widget-content">
        <div id="codeDiv">this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test</div>
       <p>
       This is a test
        5456456456456456 64564gf56d4sgf56 sr4g56dfs4g56df4g6 er5g4df5s64g5df4g56 deg465es4g5d4s56g4d5s6g46dsg456 w4g56ds5gdf5sg56ds4 w56g45ds4g5sg4sd4g sd4g56d4s56g4df5s6g4 sgdfsgdfgh!!!
       </p>
    </div>
    </div>

    .popCont > span {
        padding 15px;
        margin-left: 97%;
        margin-top: 1%;
        cursor: pointer;
        color: red;
    }

    .popCont{
        position: absolute;
        top: 10%;
        left: 20%;
        width: 500px;
        height: 400px;
        border: 2px solid blue;
    }

    .pop {
        display: block;
        overflow: hidde;
        overflow-x: scroll;
    }

    #codeDiv{
        width: 450px;
    }

.outer {
    position: absolute;
    width: 98%;
    border:1px solid red;
}
.relative {
    position: relative;
}
.inner {
    height:200px;
    overflow-y:scroll;
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
}