html - 位置 :relative set on editable dropdown is displaying over header of web page when scroll down

Question

这是我设置标题和可编辑下拉列表的 Html 代码

<div class="header" style="position:fixed; width:100%;">
    <div class="container-fluid" id="continer1ForProjectContext">
        <div class="row-fluid">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><a>img style="margin-left:10%; margin-top:0.3%;" ></a>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="form-group has-success" style="margin-left:30%;">
            <div class="select-editable" id="select2">
                <select ng-options="item.label for item countryValues track by item.id" ng-model="selectedCountry">
                    <input type="text" name="Country" value="select" ng-model="selectedProject.label" id="txtProject" required />
            </div>
        </div>

    </div>
</div>

这是我使用的 CSS

#continer1ForProjectContext{
    background-color: #009530;
      color: #959696;
      height: 65px;
}



.select-editable { 
    background-color:white;
    width:120px;
    height:18px;
    position:absolute;
}

.select-editable select {
   top:0px;
   left:0px;
   font-size:14px;
   border:solid #3c763d 1px;
   width:170px;
   margin:0;
   height:30px;
   border-radius: 5px 5px 5px 5px; 
   position:absolute;
}

.select-editable input {
   bottom:0
   width:150px;
   padding:1px;
   font-size:12px;
   border:solid #3c763d 1px;
   border-bottom:none;
   height:29px;
   border-radius: 5px 0px 0px 5px;
   position:absolute;
}

.select-editable select:focus, .select-editable input:focus {
   outline:none;
}

我希望标题固定，但同时当我向下滚动页面时，可编辑的组合框在标题上方可见。问题是什么？？？任何帮助都是可取的!!!

Answer 1

这个'问题'是因为 position: absolute;和位置:固定；从文档流中取出一个元素。为确保您的元素“层”在 z 轴上的顺序正确，您可以使用 z-index .

找到了一本包含更多信息的好书 here .