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

我有一個由我自己創建的模態框，我想在模態框的右上角添加一個關閉按鈕。我希望它稍微超出模態框。就像這樣：如何使用滾動條在div的右上角放置一個關閉圖標？

（來自this site兩者）

在右上角的十字架添加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;不起作用，因爲沒有辦法與模式框對齊。

A JSFiddle showing the problem

那麼，有沒有辦法將關閉圖標上方，同時使內容滾動能夠作爲陳述？

來源

2015-10-09 cytsunny

https://jsfiddle.net/no7wjhm2/4/ –

我會做一個額外的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沒有溢出參數。小孩：溢出：隱藏;

來源

2015-10-09 08:39:42

把一個包裝周圍和風格。

下面是一個簡單solution

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

來源

2015-10-09 08:39:55

Encolse額外的包裝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/ - 看到這裏的工作代碼

來源

2015-10-09 08:41:14

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

回答

相關問題