stackoom
  简体   繁体   中英

Negative z-index not working inside modal

 原文  2018-10-23 04:55:24  2   3    javascript/ html/ css/ css3

Question

I need to style the radio button with my custom 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

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 answers

solution1
 4 ACCPTED  2018-10-23 04:58:21

Perhaps, you can try negative margin instead of using 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.

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>

solution2
 2  2018-10-23 05:47:20

Use parent .flg_slct some positive z-index:1 rest of all your code is 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>

solution3
 1  2018-10-23 09:06:27

据我所知，默认模型对话框有1050个z-index，所以需要给出1050以上，如果你给1060那么它会正确显示。

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question z-index not working on modal created in react and modal not appearing on top onclick not working in webkit or mozilla when z-index is negative value Z-index not working Z-index not working Magento 2 modal z-index CSS Pseudo-elements z-index inside bootstrap modal Bootstrap modal z-index z-index on jquery dialog not working inside an iframe z-index not working in IE z-index not working as intended
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM