CSS 定位：为什么要将整个文档设置为相对？

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

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

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

http://jsfiddle.net/3sgKL/

虽然这些图标没有出现在小提琴的圆形菜单上（它们在我的网站上显示得很好。）

谢谢！

Answer 1

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

你可以试试这个：

// 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 :)