如何修復彈出框中的按鈕位置

我有一個彈出框，右上角有一個關閉按鈕，看起來像這樣。問題在於，當水平滾動打開並向右滾動時，它會將位置更改爲框的中心，如下所示。如何修復彈出框（div）右上角的按鈕？如何修復彈出框中的按鈕位置

我的按鈕位置

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

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

來源

2016-08-22 kevin_b

彈出窗口是否需要垂直和水平滾動？這似乎有點糟糕的用戶體驗。但如果你確實需要它，那麼內部內容應該有滾動，並且外部容器應該與靠近的位置相關。 –

您是否嘗試在CSS中使用float：right;' –

@ArathiSreekumar是的，因爲那裏的文本可能很長並且有很多行 –

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

來源

2016-08-22 15:21:28 canyon

儘管這段代碼可以解決這個問題，[包括解釋]（// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）真的有助於提高你的文章的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。也請儘量不要使用解釋性註釋來擠佔代碼，因爲這會降低代碼和解釋的可讀性！ – FrankerZ

沒有爲我工作 –

你是正確的浮動不會工作就是這樣，但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; 
    }

來源

2016-08-22 16:13:38

感謝大家的幫忙。我最終通過跟隨這個小提琴修復了這個問題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; 
}

來源

2016-08-22 17:15:47

如何修復彈出框中的按鈕位置

回答

相關問題