负z-index在模态内不起作用
[英]Negative z-index not working inside modal
问题描述
I need to style the radio button with my custom css 
我需要用我的自定义css设置单选按钮的样式
It's almost working but I'm facing a problem. 它几乎正常，但我遇到了问题。 I don't know Why z-index(-1) is not working inside a modal 我不知道为什么z-index（-1）不能在模态中工作
Here's my code 这是我的代码
.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>
I don't know what am I missing here. 我不知道我在这里错过了什么。 I need to replace the default replace radio button with my custom style which is next to the flag. 我需要用标志旁边的自定义样式替换默认的替换单选按钮。
Any alternative answers will be appreciated. 任何替代答案将不胜感激。
3 个解决方案
解决方案1
4 已采纳 2018-10-23 04:58:21
Perhaps, you can try negative margin instead of using z-index. 也许，您可以尝试使用负边距而不是使用z-index。 Try this code. 试试这个代码。
z-index:-1;
will go beyond the modal because modal's z-index is 999 or 9999 something like this its very huge. 将超越模态因为模态的z-index是999或9999这样的东西非常巨大。
So try giving negative margin it won't affect anything 因此，尝试给予负余量不会影响任何事情
.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>
解决方案2
2 2018-10-23 05:47:20
Use parent .flg_slct some positive z-index:1 rest of all your code is Ok 使用父.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>
解决方案3
1 2018-10-23 09:06:27
据我所知，默认模型对话框有1050个z-index，所以需要给出1050以上，如果你给1060那么它会正确显示。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
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
Z-index不起作用 - Z-index not working
Z-index不起作用 - Z-index not working
Magento 2 模态 z-index - Magento 2 modal z-index
引导模态内的CSS伪元素z-index - CSS Pseudo-elements z-index inside bootstrap modal
Bootstrap 模态 z-index - Bootstrap modal z-index
jquery对话框上的z-index在iframe中不起作用 - z-index on jquery dialog not working inside an iframe
Z-index在IE中不起作用 - z-index not working in IE
z-index无法正常工作 - z-index not working as intended
相关标签