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/

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

谢谢！

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：）

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

1 个答案: