如何使用滾動條在div的右上角放置一個關閉圖標？

Question

我有一個自己創建的模態框，我想在模態框的右上方添加一個關閉按鈕。 我希望它有點超出模態框的范圍。 像這樣：

（摘自本網站 ）

右上角的十字架添加有css，如下所示：

#closeModal { 
    position:absolute;
    top:-12px; /* Half the icon's height */
    right:-12px; /* half the icon's width */
    z-index:50;
}

當div過大時，這項工作overlfow: visible; 但是，對於我的模式框，我有更多的內容，並且我希望它在更多內容時可以滾動。 所以我需要將div設置為overflow: auto; 然后切下十字架。

由於模態框的寬度是通過自動居中的像素設置的，因此將十字放在模態框的外面並使其position:fixed; 無法工作，因為無法與模式框對齊。

一個顯示問題的JSFiddle

因此，有沒有辦法在使內容可滾動時放置如上所述的關閉圖標？

Answer 1

我會做一個額外的div，像這樣： https : //jsfiddle.net/no7wjhm2/3/ 。

<div class="testing-div">
    <span class="fa-stack fa-lg close-button">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
<div class="testing-div2">

父div沒有溢出參數。 孩子：溢出：隱藏；

Answer 2

將包裝紙和樣式放在一起...

這是一個簡單的解決方案

<span class="fa-stack fa-lg close-button">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

<div class="testing-div">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas est erat, hendrerit vel massa ut, pharetra facilisis dui. Aliquam egestas sodales leo, aliquet vehicula libero pretium vel. In quis lacinia massa. Ut pretium rutrum est sed mattis. Vivamus tempor est sapien, id volutpat ipsum vulputate ut. Cras viverra, ligula non blandit mollis, libero augue sollicitudin lectus, id scelerisque sem felis id mauris. Aenean et est fringilla, condimentum nisl varius, efficitur leo. Pellentesque iaculis, erat vestibulum malesuada posuere, augue orci blandit lorem, vel dictum nisi arcu sit amet justo. Nullam dapibus tincidunt felis, sed tincidunt eros fringilla vitae. Sed in turpis at neque hendrerit sagittis. Phasellus dapibus tempus lacus, a auctor nibh pretium a. In nec lobortis felis, at tincidunt odio. Vivamus ac convallis urna. Nullam suscipit dictum felis ut sodales. Aenean molestie, dui sit amet eleifend ullamcorper, mi elit condimentum elit, non ultricies erat orci feugiat sapien.

Curabitur efficitur sit amet eros a imperdiet. Donec vel enim eget odio suscipit viverra. Nunc venenatis tortor non sollicitudin ultrices. In consequat in augue in molestie. Quisque at ligula ex. Aenean tristique mollis dui non bibendum. Aenean sapien erat, porta vitae auctor vitae, aliquet at urna. Nullam ultricies dui vitae velit dapibus, id lacinia augue consequat. Donec elit nulla, laoreet non tellus ut, blandit egestas quam. Nullam at tristique tellus. Fusce lorem tortor, congue et facilisis sit amet, feugiat ac erat. Phasellus in vestibulum arcu.

Sed rutrum risus in venenatis congue. Curabitur in dui feugiat, pulvinar ligula sed, cursus dolor. Mauris tincidunt dolor ligula, ut feugiat tellus ullamcorper at. Fusce imperdiet egestas turpis vulputate dignissim. Proin aliquam arcu a nulla semper, eget pellentesque arcu lacinia. Suspendisse dictum lobortis libero eget tristique. Donec sit amet blandit nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec luctus consectetur justo, et ultrices enim. In in ante sagittis tellus iaculis scelerisque. Nulla eros justo, accumsan ut metus a, mollis accumsan diam. Nulla faucibus arcu nunc, ut posuere lacus dignissim a.

Integer volutpat augue sed sapien porttitor malesuada. Praesent eget magna ac nunc interdum suscipit. Vestibulum imperdiet in erat ut pellentesque. Etiam eget tincidunt metus. Nulla risus lacus, elementum in pharetra et, euismod eget tortor. Cras convallis vel lectus in tincidunt. Nullam vel justo at arcu aliquam efficitur. Nam cursus maximus urna, sed dignissim eros condimentum quis. In vehicula dolor justo, non consequat quam condimentum tempus. Praesent id justo neque. Nunc aliquam felis quis pulvinar egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin lacinia mattis hendrerit. Ut sed urna neque. Donec vitae fringilla neque, ac commodo ligula. Mauris iaculis augue nec maximus interdum.

Aenean metus odio, blandit tristique nibh gravida, fermentum condimentum nisl. Cras ultrices auctor enim, vel ultricies felis consectetur venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sed metus neque. Pellentesque sed nisl laoreet, condimentum urna consectetur, efficitur lectus. Sed dapibus sodales nisl. Sed commodo ante nec felis ultrices finibus. Ut a semper ligula, id porttitor est. Phasellus pulvinar ipsum semper fermentum tincidunt. Aliquam erat volutpat. Duis maximus libero dolor, vitae feugiat purus feugiat ut. Mauris sollicitudin diam mi, sit amet auctor erat feugiat ac.
</div>

</div>

和CSS

.testing-div {
    position: relative;
    display: block;    
    height: 400px;
    width: 300px;
    overflow: auto;
}

.close-button {
    position: absolute;
    right: -35px;
    top: -35px;
}

.wrapper { height: 400px;
    width: 300px;position: relative;
    display: block; margin: 20px auto;}

Answer 3

將您的Modal框封裝在一個額外的wrapper div ，如下所示：

<div class="container">

       ....Modal....
</div>

CSS：

.container{

    margin:30px;
    position:relative;
    width:300px;
 }

 .testing-div {
    //position: relative;
    display: block;
   // margin-top: 10%;
   //margin-left: 20%;
   height: 400px;
   width: 300px;
   overflow: auto;
   //margin:50px;
 }

小提琴 ： https : //jsfiddle.net/no7wjhm2/5/-在這里查看工作代碼