这是我设置标题和可编辑下拉列表的 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;
}
我希望标题固定,但同时当我向下滚动页面时,可编辑的组合框在标题上方可见。问题是什么???任何帮助都是可取的!!!
最佳答案
这个'问题'是因为 position: absolute;和位置:固定;从文档流中取出一个元素。为确保您的元素“层”在 z 轴上的顺序正确,您可以使用 z-index .
找到了一本包含更多信息的好书 here .
关于html - 位置 :relative set on editable dropdown is displaying over header of web page when scroll down,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30453907/