P.9、CSS基础_定位与z-index

相对定位、绝对定位、固定定位、z-index

一、相对定位 position:relative

相对于原来的位置进行偏移，仍然在标准文本流中，原来的位置仍然保留
语法：
position:relative;
positon:relative;(相对定位)
向右移动：                 向左移动:
left:20px;                     left:-20px;
right:-20px;                 right:20px;
向上移动：                 向下移动:
top:-20px;                   top:20px;
bottom:20px;             bottom:-20px;
总结理解：某元素赋予left:20px，那么就会该元素的左边会被挤压20px导致向右移动。反之

二、绝对定位 absolute与固定定位fixed

绝对定位：position:absolute;

基于xxx的基础上定位，进行上下左右定位，原来的位置不会保留，相当于漂浮起来

1. 没有父级元素定位的前提下，相当于浏览器定位（随着浏览器窗口大小定位!）
2. 假设父级元素存在定位（大多数相对定位relative），通常相对于父级偏移
3. 在父级范围内移动，方向距离用正数表示

固定定位：position:fixed;

完全固定，浏览器导航栏之类使用
position:fixed;
right:n;
top:n;

z-index层级概念

z-index图层、层级概念。
前提：定位浮动起来后，区分层次、
语法：
z-index：0~99+；
默认为0，最底层表示，数字越大，层级越高！

拓展：

z-index分层后网页背景透明度：
opacity：0.5（0~1）