CSS 笔记（九）：布局 —— 定位

CSS 笔记（九）：布局 —— 定位

相对定位

标签始终相对于自己之前在标准流中的位置移动

position: relative;

属性

top

right

bottom

left

值

• (…)px

相对定位不脱离标准流（区分块级/行内/行内块级元素），在同一个方向上的定位属性只能使用一个，由于相对定位的元素任然占用标准流中的位置，为相对定位的元素设置 margin / padding 属性时，相当于为相对定位的元素之前在标准流中的位置设置相应属性，从而影响标准流中的布局

绝对定位

标签始终相对于参考点移动

position: absolute;

属性

top

right

bottom

left

值

• (…)px

绝对定位脱离标准流（不区分块级/行内/行内块级元素），默认情况下，不论是否存在祖先元素，参考点均为 body，如果一个绝对定位的元素存在祖先元素，且祖先元素为定位流（相对定位、绝对定位、固定定位），那么此元素的参考点为此祖先元素，如果具有此属性的祖先元素存在多个，那么以最近的祖先元素为参考点，如果一个绝对定位的元素以 body 为参考点，那么以此标签仅在网页首屏内移动，绝对定位的元素会忽略祖先元素的 padding 属性

子绝父相

在布局过程中，如果仅仅使用相对定位，由于相对定位不会脱离标准流，所以在标准流中占用空间，不利于布局界面，如果仅仅使用绝对定位，默认情况下，绝对定位的元素以 body 为参考点，那么元素位置会随着浏览器的大小改变而改变

子元素使用绝对定位，父元素使用相对定位

父元素使用相对定位，不会脱离标准流，所以不会改变页面的基本布局，子元素使用绝对定位，由于父元素为定位流，因此子元素以父元素为参考点，如果父元素的位置和大小不发生改变，那么子元素的位置也不会发生改变

水平居中

div {
    width: 300px
    position: absolute;
    left: %50;
    margin-left: -150px;    /* transform: translate(-50%); */
}

固定定位

使某个标签不会随着滚动条的滑动而移出界面

position: fixed;

固定定位脱离标准流（不区分块级/行内/行内块级元素）

静态定位

默认情况下，标签本身即为静态定位

z-index

默认情况下，所有元素均有一个默认的 z-index 属性（用于控制定位流元素之间的层叠关系），取值为 0

• 默认情况下，定位流元素会层叠标准流元素，之后的定位流元素会层叠之前的定位流元素
• 如果定位流元素设置了 z-index 属性，那么值最大的元素位于最上层

从父现象

若两个元素的祖先元素均没有设置 z-index 属性，那么此属性值最大的定位流元素位于最上层，如果两个元素的祖先元素均设置了 z-index 属性，那么子元素的 z-index 属性失效，即层叠顺序以祖先元素的 z-index 属性为准