极客观点
项目管理
HarmonyOS
帮刚入职的同学写一个弹窗小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>
感激不尽！
因為你是使用
<a>，這預設是inline Element，inline的元素有個特性是其padding-top和padding-bottom不會去推擠別的元素，而是覆蓋上去，所以當你在左上角時，他並沒有去推擠最外面的視窗，而是延伸出去(覆蓋)，你只要把<a>設為inline-block就可以解決這個問題。