css 定位脱标,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大小，值大的盖住值小的，

什么是拼爹现象