您可以在 github 仓库中找到这篇文章中的所有代码。
您可以在此处查看隐藏元素的视觉效果 - codesandbox
隐藏元素
hiding elements
hiding elements
hiding elements
hiding elements
hiding elements
this is hidden
covering the elements
.display-none {
display: none;
}
.outside-by-absolute {
position: absolute;
left: -9999px;
}
.outside-by-relative {
position: relative;
left: -9999px;
}
.outside-by-margin {
margin-left: -9999px;
}
.hide-by-opacacity {
opacity: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
}
.covering-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.hidden-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.hide-by-clip {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 0px, 0px, 0px);
}
.hide-by-transform {
transform: scale(0, 0);
}
