中软大前端体验0103-position定位-导航

Position定位

属性值

  • absolute:绝对定位
  • relative:相对定位
  • fixed:固定定位
  • static:默认值。没有定位,元素出现在正常的流中

absolute:绝对定位

漂浮于上层,脱离下层文档流。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body).一般情况下会在页面最大容器设置position:relative


relative:相对定位

占据标准文档流位置,相对于元素原来位置的定位。会与其他元素重叠


fixed:固定定位

相对于body层的定位,固定在屏幕某一位置。

二级导航

一级标题(nav)二级标题(nav2)
nav2是绝对定位,position:absolute,其父类元素也要添加position属性。
默认情况下nav2应该是隐藏的visibility: hidden ,当鼠标悬停在一级标题nav上时二级标题nav2显示.nav ul li:hover ul{ visibility: visible; },调整top值,和left值
nav与nav2是嵌套关系(nav2是nav的子元素)

GitHub set up