CSSを使用してログに通知する閉じるボタンを追加するにはどうすればいいですか？

Question

alertify log messageにこの閉じるボタンを追加しようとしています。私はSOに私はalertify logメッセージのうち、閉じるボタンを移動することができないんだけど、何らかの理由でリストされているいくつかの解決策を試してみた

：最終的な表示は次のようなものでなければなりません。クローズボタンのオーバーフローは常に隠されていて、CSS設定で試してみましたが機能しません。

var fn = function() { 
 
    alertify.log('How to add close button? <a href="" class="close-icon"></a>'); 
 
}; 
 

 
fn();

.close-icon 
 
{ 
 
    position: absolute; 
 
    top: -5px; 
 
    right:-5px; 
 
    display:block; 
 
    box-sizing:border-box; 
 
    width:20px; 
 
    height:20px; 
 
    border-width:3px; 
 
    border-style: solid; 
 
    border-color:black; 
 
    border-radius:100%; 
 
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%); 
 
    background-color:black; 
 
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5); 
 
    transition: all 0.3s ease; 
 
}

<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script> 
 
<button onclick="fn();"> 
 
    <span class="ui-button-text">Test</span> 
 
</button>

Answer 1

問題は、コンテンツが容器の外に溢れ出ると、その内容が隠されているということです。この問題を解決する簡単な方法はである：

.alertify-logs > div { 
    overflow: visible; 
} 

var fn = function() { 
 
    alertify.log('How to add close button? <a href="" class="close-icon"></a>'); 
 
}; 
 

 
fn();

.close-icon 
 
{ 
 
    position: absolute; 
 
    top: -5px; 
 
    right:-5px; 
 
    display:block; 
 
    box-sizing:border-box; 
 
    width:20px; 
 
    height:20px; 
 
    border-width:3px; 
 
    border-style: solid; 
 
    border-color:black; 
 
    border-radius:100%; 
 
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%); 
 
    background-color:black; 
 
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5); 
 
    transition: all 0.3s ease; 
 
} 
 

 
.alertify-logs > div { 
 
    overflow: visible; 
 
}

<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script> 
 
<button onclick="fn();"> 
 
    <span class="ui-button-text">Test</span> 
 
</button>