如何使用 CSS 创建自相矛盾的效果？

矛盾效应是 div 或元素以圆形形式彼此顶部放置的效果。当您想要设计一个在悬停时打开的圆形按钮并且每个按钮分配一些任务并放置像彼此的顶部一样时，这种类型的效果非常有用。
在下面的示例中，我们将使用 z-index。像这样的放置需要是位置属性和顶部、左侧、右侧和底部属性的专家。然后，您可以轻松设计出矛盾的效果。

下面的例子说明了创建矛盾效应的方法：

示例 1：



  

    Paradoxical effect by HTML and CSS
      
        

  

    
        GeeksforGeeks
        A Computer Science Portal for Geeks
        Box1
        Box2
        Box3
        Box4

输出：

示例 2：



  

    
        Paradoxical effect
        by HTML and CSS
    
  
    

  

    
        GeeksforGeeks
        
            A Computer Science Portal for Geeks

输出：