隐藏元素 - CSS 挑战

珍惜时间，勤奋学习！今天给大家带来《隐藏元素 - CSS 挑战》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

您可以在 github 仓库中找到这篇文章中的所有代码。

您可以在此处查看隐藏元素的视觉效果 - codesandbox

隐藏元素

  
    
    
    
    
    
  
  
    
hiding elements

    

    
hiding elements

    
hiding elements

    
hiding elements

    
hiding elements(for screen reader)

    
hiding elements

    

      
this is hidden
      
covering the elements
    

    
hiding elements

    
hiding 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);
}

好了，本文到此结束，带大家了解了《隐藏元素 - CSS 挑战》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！