css - 固定定位弹窗层为何会在内容下面出现？
本文介绍了css - 固定定位弹窗层为何会在内容下面出现？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
帮刚入职的同学写一个弹窗小demo，弹窗层使用fix定位，底层只有一个a标签模拟的按钮，position为static。然而调试时按钮未能像想象中的定位在屏幕左上方，而是稍微往上偏移，点击按钮出现弹窗层也未能覆盖整个屏幕，而是在按钮下方出现如下图。小弟的代码也呈上，请各路大手指点下哪里出现了毛病？
样式表：
<style type="text/css">
*{box-sizing:border-box;margin:0;padding: 0}
html,body{width:100%;height: 100%;font-size: 62.5%;font-family: Helvetica Neue, Helvetica, STHeiTi, sans-serif;}
a.open{cursor:pointer;text-decoration: none;padding: 5px;background: #f90;border-radius:4px;text-align: center;color: #fff;font-size: 1rem;font-weight: 700;
/*position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);*/
}
.hide{display: none}
.pop{position:fixed;z-index:999;width: 100%;height: 100%;background: rgba(0,0,0,0.3)}
.contentbox{width: 10rem;height: 15rem;position: absolute;left: 0;top: 0;right:0;bottom: 0;margin:auto;border-radius: 6px;background: #fff;box-shadow:1px 1px 8px rgba(0,0,0,0.2),-1px -1px 8px rgba(0,0,0,0.2);}
.content{width: 100%;height: 100%;position: relative;padding: 1rem;font-size: 1rem}
.close{position: absolute;right: 0;top: 0;cursor: pointer;
transform:translate(50%,-50%);
-webkit-transform:translate(50%,-50%);
-ms-transform:translate(50%,-50%);
-o-transform:translate(50%,-50%);
-moz-transform:translate(50%,-50%);
width: 1.5rem;height: 1.5rem;border: 2px solid #f8f8f8;border-radius: 100%;text-align: center;background: #ddd}
@media all and (min-width: 320px) {
html{font-size:100%}
}
@media all and (min-width: 360px) {
html{font-size:112.5%}
}
@media all and (min-width: 384px) {
html{font-size:120%}
}
@media all and (min-width: 414px) {
html{font-size:130%}
}
</style>结构及脚本：
<body>
<a href="javascript:;" class="open">打开弹窗</a>
<div class="pop hide" >
<div class="contentbox">
<div class="contentbox">
<div class="content">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<div class="close" ></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pop=document.querySelector('.pop'),
btn=document.querySelector('.open'),
close=document.querySelector('.close');
btn.addEventListener('click',function(e){_open(e)},false);
close.addEventListener('click',function(e){_close(e)},false);
function _open(event){
event.preventDefault();
console.log(1);
pop.setAttribute('class','pop');
}
function _close(event){
event.preventDefault();
console.log(2);
pop.setAttribute('class','pop hide');
}
</script>
</body>
感激不尽！
解决方案
彈窗層覆蓋不完全
.pop {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3)
}
按鈕跑出去一點點
因為你是使用 <a>，這預設是 inline Element ， inline 的元素有個特性是其 padding-top 和 padding-bottom 不會去推擠別的元素，而是覆蓋上去，所以當你在左上角時，他並沒有去推擠最外面的視窗，而是延伸出去(覆蓋)，你只要把 <a> 設為 inline-block 就可以解決這個問題。
a.open {
display: inline-block;
cursor: pointer;
text-decoration: none;
padding: 5px;
background: #f90;
border-radius: 4px;
text-align: center;
color: #fff;
font-size: 1rem;
font-weight: 700;
/*position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);*/
}
这篇关于css - 固定定位弹窗层为何会在内容下面出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
