负Z索引在模态内不起作用

时间：2018-10-23 04:55:25

标签： javascript html css css3

我需要使用自定义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>

我不知道我在这里想念什么。我需要用标记旁边的自定义样式替换默认的替换单选按钮。

任何其他答案将不胜感激。

3 个答案:

答案 0 :(得分：4)

也许，您可以尝试使用负边距而不是使用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>

答案 1 :(得分：2)

使用父级.flg_slct的z-index为正：您所有代码的其余部分都可以 

 .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>

答案 2 :(得分：1)

据我所知，默认情况下，模型对话框的z-index值为1050，因此需要提供大于1050的z-index，如果您提供1060，则它将正确显示。

相关问题
最新问题