[英]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.