[英]Negative z-index not working inside modal
我需要用我的自定義css設置單選按鈕的樣式
它幾乎正常，但我遇到了問題。 我不知道為什么z-index（-1）不能在模態中工作
這是我的代碼
.container{ padding:50px; width:100%; } .langsection .langname{ width:50%; float:left; } .langsection .langflag{ width:50%; float:left; text-align:right; } .modal.langmod .modal-dialog{ width:400px; margin:50px auto 0; background:#fff; border-radius:6px; border:none; } .modal .modal-body{ padding:0; border-radius:6px; overflow:hidden; } .selclang li{ list-style:none; text-transform:uppercase; padding:10px 15px; border-bottom:1px solid #e5e5e5; } .modal-dialog::after{ content:""; clear:both; display:table; } .selclang{ margin:0; padding:0; } .langflag span.flg_icn{ padding-right:20px; } .langflag span{ display:inline-block; } .selclang li.active, .selclang li:hover{ background:#A40030; color:#fff; } .modal.fade.in{ padding:0; } .modal.langmod .modal-content{ border:none; } .modal.langmod p{ text-transform:uppercase; width:200px; margin:auto; text-align:center; } .langflag input[type="radio"]{ width:18px; height:18px; z-index:88; opacity:0; } .langflag input[type="radio"] + i{ width:18px; height:18px; position:absolute; top:4px; left:0; border-radius:100%; border:1px solid #e5e5e5; z-index:-1; } .langflag input[type="radio"]:checked + i{ box-shadow:0 0 3px 0 rgba(0,0,0,0) inset; background:green; } .flg_slct{ position:relative; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal langmod fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content clearfix"> <div class="modal-body"> <ul class="selclang"> <li class="active"> <div class="langsection clearfix"> <div class="langname">English</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Nederlands</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Deutch</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Jezyk Polski</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> </ul> <p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p> </div> </div> </div> </div> </div> </body> </html>
我不知道我在這里錯過了什么。 我需要用標志旁邊的自定義樣式替換默認的替換單選按鈕。
任何替代答案將不勝感激。
也許，您可以嘗試使用負邊距而不是使用z-index。 試試這個代碼。
z-index:-1;
將超越模態因為模態的z-index是999或9999這樣的東西非常巨大。
因此，嘗試給予負余量不會影響任何事情
.container{ padding:50px; width:100%; } .langsection .langname{ width:50%; float:left; } .langsection .langflag{ width:50%; float:left; text-align:right; } .modal.langmod .modal-dialog{ width:400px; margin:50px auto 0; background:#fff; border-radius:6px; border:none; } .modal .modal-body{ padding:0; border-radius:6px; overflow:hidden; } .selclang li{ list-style:none; text-transform:uppercase; padding:10px 15px; border-bottom:1px solid #e5e5e5; } .modal-dialog::after{ content:""; clear:both; display:table; } .selclang{ margin:0; padding:0; } .langflag span.flg_icn{ padding-right:20px; } .langflag span{ display:inline-block; } .selclang li.active, .selclang li:hover{ background:#A40030; color:#fff; } .modal.fade.in{ padding:0; } .modal.langmod .modal-content{ border:none; } .modal.langmod p{ text-transform:uppercase; width:200px; margin:auto; text-align:center; } .langflag input[type="radio"]{ width:18px; height:18px; opacity:0; } .langflag input[type="radio"] + i{ width:18px; height:18px; top:4px; left:0; border-radius:100%; border:1px solid #e5e5e5; margin-left: -20px; display:inline-block; } .langflag input[type="radio"]:checked + i{ box-shadow:0 0 3px 0 rgba(0,0,0,0) inset; background:green; } .flg_slct{ position:relative; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal langmod fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content clearfix"> <div class="modal-body"> <ul class="selclang"> <li class="active"> <div class="langsection clearfix"> <div class="langname">English</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Nederlands</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Deutch</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Jezyk Polski</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> </ul> <p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p> </div> </div> </div> </div> </div> </body> </html>
使用父.flg_slct一些積極的z-index：所有代碼的其余部分都是OK
.container{ padding:50px; width:100%; } .langsection .langname{ width:50%; float:left; } .langsection .langflag{ width:50%; float:left; text-align:right; } .modal.langmod .modal-dialog{ width:400px; margin:50px auto 0; background:#fff; border-radius:6px; border:none; } .modal .modal-body{ padding:0; border-radius:6px; overflow:hidden; } .selclang li{ list-style:none; text-transform:uppercase; padding:10px 15px; border-bottom:1px solid #e5e5e5; } .modal-dialog::after{ content:""; clear:both; display:table; } .selclang{ margin:0; padding:0; } .langflag span.flg_icn{ padding-right:20px; } .langflag span{ display:inline-block; } .selclang li.active, .selclang li:hover{ background:#A40030; color:#fff; } .modal.fade.in{ padding:0; } .modal.langmod .modal-content{ border:none; } .modal.langmod p{ text-transform:uppercase; width:200px; margin:auto; text-align:center; } .langflag input[type="radio"]{ width:18px; height:18px; z-index:88; opacity:0; } .langflag input[type="radio"] + i{ width:18px; height:18px; position:absolute; top:4px; left:0; border-radius:100%; border:1px solid #e5e5e5; z-index:-1; } .langflag input[type="radio"]:checked + i{ box-shadow:0 0 3px 0 rgba(0,0,0,0) inset; background:green; } .flg_slct{ position:relative; z-index:1; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal langmod fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content clearfix"> <div class="modal-body"> <ul class="selclang"> <li class="active"> <div class="langsection clearfix"> <div class="langname">English</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Nederlands</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Deutch</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> <li> <div class="langsection clearfix"> <div class="langname">Jezyk Polski</div> <div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div> </div> </li> </ul> <p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p> </div> </div> </div> </div> </div> </body> </html>
據我所知，默認模型對話框有1050個z-index，所以需要給出1050以上，如果你給1060那么它會正確顯示。
z-index不適用於在react中創建的模態且模態未顯示在頂部
[英]z-index not working on modal created in react and modal not appearing on top
當z-index為負值時，onclick無法在webkit或mozilla中運行
[英]onclick not working in webkit or mozilla when z-index is negative value
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.