Question

我有一个弹出框，右上角有一个关闭按钮，看起来像这样。问题是当水平滚动打开并向右滚动时，它会将位置更改为框的中心，就像这样。如何修复弹出框（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>

我尝试将css更改为此，但它只是将按钮放在主页面中的弹出框之外，这不是我想要做的事情

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

Answer 1

.pop {
    position:relative;
}
.pop > span {
    position:absoltute;
    top:10px;
    right:10px;
}

Answer 2

你是对的，浮动不会像那样工作但here is how I make it work fiddle：

HTML：

    <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>

CSS：

    .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;
    }

Answer 3

感谢大家的帮助。我最后通过跟随这个小提琴http://jsfiddle.net/84cyupb0/1/来修复它，并添加了另一个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;
}

如何在弹出框中修复按钮位置

3 个答案: