admin管理员组文章数量:1530268
前几天做项目的时候，因为对position：fixed属性有认识不全面，然后就导致做弹出层的时候弹出层不能覆盖整个浏览器可视窗口 。
之前认为设置fixed的元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。
但fixed解释还有一部分就是，当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
今天就场景复现一下。
一、父元素无transform, perspective 或 filter 时，弹出层呈现
效果图
父元素没有transform, perspective 或 filter 时，弹出层覆盖整个浏览器视口
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
}
.main{
height: 100%;
display: flex;
/* background-color: darkgoldenrod; */
}
/*左边样式*/
.main > .left{
height: 100%;
border: 1px solid firebrick;
box-sizing: border-box;
background-color: blueviolet;
flex: 1 1 auto;
}
/*弹出层样式*/
.pop-modal-content{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.40);
display: none;
}
.pop-container{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 460px;
height: 290px;
padding: 56.1px 87px 48px 88px;
background: #FFFFFF;
box-shadow: 0 8px 64px 0 rgba(0,0,0,0.15);
}
.close{
line-height: 14px;
width: 14px;
text-align: center;
position: absolute;
right: 25px;
top: 25px;
color: #999999;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<button id="test1">弹出层</button>
<div class="pop-modal-content">
<!--弹出层-->
<div class="pop-container">
<div class="close">
×
</div>
<div class="pop-content">
12346
</div>
</div>
</div>
</div>
</div>
</body>
<script>
/*test1开启弹出层事件*/
function test1(){
document.getElementsByClassName("pop-modal-content")[0].style="display:block;";
}
/*关闭弹出层事件*/
function close(){
document.getElementsByClassName("pop-modal-content")[0].style="display:none;";
}
document.getElementById("test1").addEventListener("click",test1);
document.getElementsByClassName("close")[0].addEventListener("click",close);
</script>
</html>
二、父元素有transform, perspective 或 filter 时，弹出层呈现
效果图
可以发现视口改为了当前的父元素，这样就不会占据整个浏览器。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
}
.main{
height: 100%;
display: flex;
/* background-color: darkgoldenrod; */
}
/*左边样式*/
.main > .left{
height: 100%;
border: 1px solid firebrick;
box-sizing: border-box;
background-color: blueviolet;
flex: 1 1 auto;
}
/*右边样式*/
.main > .right{
height: 100%;
border: 1px solid chartreuse;
box-sizing: border-box;
background-color: #B22222;
flex: 1 1 auto;
position: fixed;
right: 0;
width: 600px;
transform: translateX(10px);
/* perspective:150;
-webkit-perspective:150; /* Safari and Chrome */ */
/* -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%); */
}
/*弹出层样式*/
.pop-modal-content{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.40);
display: none;
}
.pop-container{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 460px;
height: 290px;
padding: 56.1px 87px 48px 88px;
background: #FFFFFF;
box-shadow: 0 8px 64px 0 rgba(0,0,0,0.15);
}
.close{
line-height: 14px;
width: 14px;
text-align: center;
position: absolute;
right: 25px;
top: 25px;
color: #999999;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<button id="test1">弹出层</button>
<div class="pop-modal-content">
<!--弹出层-->
<div class="pop-container">
<div class="close">
×
</div>
<div class="pop-content">
12346
</div>
</div>
</div>
</div>
<div class="right">
<button id="test2">父元素有transform属性的弹出层</button>
<div class="pop-modal-content" id="pop2">
<!--弹出层-->
<div class="pop-container">
<div class="close">
×
</div>
<div class="pop-content">
pop2
</div>
</div>
</div>
</div>
</div>
</body>
<script>
/*test1开启弹出层事件*/
function test1(){
document.getElementsByClassName("pop-modal-content")[0].style="display:block;";
}
/*关闭弹出层事件*/
function close(){
document.getElementsByClassName("pop-modal-content")[0].style="display:none;";
}
document.getElementById("test1").addEventListener("click",test1);
document.getElementsByClassName("close")[0].addEventListener("click",close);
/*test2*/
function test2(){
document.getElementById("pop2").style="display:block;";
}
/*关闭弹出层事件*/
function close2(){
document.getElementById("pop2").style="display:none;";
}
document.getElementById("test2").addEventListener("click",test2);
document.getElementsByClassName("close")[1].addEventListener("click",close2);
</script>
</html>
本文标签： 元素中有transformfixedFilter
版权声明：本文标题：父元素中有transform, perspective 或 filter时，fixed子元素如何呈现 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725894527a1047468.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论