深入理解html5中的position

CSS3引入了一个新的属性叫做position,它用于设置一个元素的定位方式，在HTML5中，除了传统的静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)之外，还引入了一个名为”sticky”的定位方式，这些定位方式可以让开发者更加灵活地控制页面元素的位置。,1、静态定位(static),,静态定位是默认的定位方式，元素按照正常的文档流进行排列，如果没有指定其他定位属性，元素将使用静态定位。,2、相对定位(relative),相对定位是相对于其正常位置进行偏移，一个元素被设置为相对定位后，它的左边缘将向左移动其包含块的左边缘的距离，右边缘将向右移动其包含块的右边缘的距离。,3、绝对定位(absolute),,绝对定位是相对于最近的非static定位的父元素进行偏移，如果没有父元素或者父元素也是绝对定位，那么它将相对于最初的包含块进行偏移，绝对定位的元素会脱离正常的文档流，并占据其父元素所占的空间。,4、固定定位(fixed),固定定位是相对于浏览器窗口进行偏移，即使用户滚动页面，元素也会保持在相同的位置，固定定位的元素会占据整个浏览器窗口的高度或宽度。,5、粘性定位(sticky),,粘性定位是近年来新增的一个定位方式，它允许元素在滚动范围内表现为相对定位，而在滚动范围外表现为固定定位，这样可以实现一些特殊的交互效果，如导航栏在滚动页面时始终保持在顶部。,1、如何实现一个垂直方向上始终保持在顶部的导航栏？可以使用固定定位(fixed)结合粘性定位(sticky)，首先将导航栏设置为固定定位，然后通过CSS计算出导航栏距离顶部的实际距离，再将其设置为粘性定位的top值。,答：可以使用以下CSS代码实现这个效果：