轮播图图片占满底层,左右两个导航栏覆盖在上一层(此图出处为京东商城)

css样式

css样式

 css样式  css样式  css样式  css样式

将最底层的position设为relative,覆盖的两层设置为absolute

right为0 让它靠右显示 z-index则是让它优先显示

下图是我仿的一个页面

css样式


css样式position定位问题

absolute 绝对定位 (参考w3c)

  • 位置相对于最近的已定位的父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
  • 使得元素的位置与其他的元素无关,不占据空间
  • 重叠的元素  元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

  • z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

relative 相对定位

  • 相对定位元素经常被用来作为绝对定位元素的容器块。
  • 相对其正常的位置进行定位

相关文章:

猜你喜欢
  • 2021-12-10
  • 2021-05-01
相关资源
相似解决方案