17 css定位

css定位 定位是用来移动元素位置的。 相对位置,参考元素原始位置,偏移某个距离 绝对位置,参考点是最近的有定位的祖先元素,偏移某个距离 定位1 css定位 相对定位 绝对定位 固定定位 为什么 移动元素 设置元素在包含块中出现的位置,以及遮盖2 相对定位 position: relative; 参考自己原来的位置,偏移某个距离 * 用途 1 做一些位置微调 2 配合绝对定位使用 * 相对定位的元素不脱标,它原本所占的空间仍保留 top 正数向下 可以理解为:距离原来位置顶边框,距离是100个像素 left 正数向右 距离原来位置左边框,距离是100个像素 right 正数向左 距离原来位置右边框,距离是100个像素 bottom 正数向上 距离原来位置底边框,距离是100个像素 任意组合 从top、bottom选一个 left、right选一个3 绝对定位 position: absolute * 绝对定位元素脱离标准文档流 脱标的意思:元素框不在文档流中,与文档流无关了,不占用文档流的空间 * 定位参考点 相对于其包含块:绝对定位的元素,他的参考点相是最近的有定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块 c 祖先盒子做参考点 子绝父相最常见的定位手段 最近的有定位的祖先元素:最近的、(无论何种定位 相对可以 绝对也可以 固定定位都可以)、祖先元素做参考 * 绝对定位的元素居中 margin: 0 auto; 不管用 原因适合标准流中有宽度的块元素 只能用margin-left,margin-right * 应用 90%的压盖效果都是绝对定位做的 4 固定定位 position: fixed; * 固定定位元素也是脱标 * 参考点: 浏览器的左上角图片的垂直对齐方式 vertical-align:text-top 跟文本顶部对齐 text-bottom 跟文本底部对齐z-index属性 1 作用: 负责谁压盖谁 1、 定位的元素能够压住没有定位的( 默认情况) 2、假如都定位了,html代码后面的盒子压住前面的 div 没有定位 div 绝对定位 div 相对定位 2 使用 * z-index: 数字 数字大的压住数字小的 ,默认值是0, * z-index只适用于有定位的元素,标准流的元素不能写z-index,浮动的元素也不能写z-index z-index:-1 可以使定位元素放在标准流元素的后面 * 拼爹现象 见案例 如果父元素都是定位元素,则比较父元素的z-index大小,值大的盖住值小的,什么是拼爹现象

  

相关文章