html - CSS 定位 : why would I set an entire document to relative?

Question

我正在使用 Codrops 构建固定圆形导航的教程。 http://bit.ly/1nrUH6x .

导航在我实现它的站点上运行良好，但在 CSS 中发现了一个我不理解的要求:

* {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   list-style: none;
   position: relative;
}

为什么我要将所有 (*) 设置为相对值？如果我将其注释掉，导航将停止工作，但如果我保留它，我将无法混合相对和绝对定位来定位我的视频播放按钮和字幕。谁能解释一下上面代码的用途？

抱歉，如果不清楚，我是 StackOverflow 的新手。我创建了一个包含相关代码的 JSFiddle

http://jsfiddle.net/3sgKL/

虽然图标没有出现在 fiddle 的圆形菜单上(它们在我的网站上显示得很好。)

谢谢!

Answer 1

并非所有元素都需要这样做。您需要单独为 ul、li 和 a 元素包含 box-sizing:border-box 和 position:relative 属性。它主要用于使图标位于圆形导航的中心。如果您删除它们，那么图标将错位放置在导航顶部。

你可以试试这个:

// this will target only within the circular navigation
.cn-wrapper ul,.cn-wrapper li, .cn-wrapper a { 
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      position: relative
    }

现在您可以为您的视频播放按钮等应用 css :)