[webgis 0基础到找工作]------CSS高级 day07

1.定位

相对定位 position: relative

特点：

• 不脱标，占用自己原来位置

• 显示模式特点保持不变

• 设置边偏移则相对自己原来位置移动

绝对定位 position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

• 脱标，不占位

• 显示模式具备行内块特点

• 设置边偏移则相对最近的已经定位的祖先元素改变位置

• 如果祖先元素都未定位，则相对浏览器可视区改变位置

定位居中

实现步骤：

1. 绝对定位

2. 水平、垂直边偏移为 50%

3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为 –尺寸的一半

• transform: translate(-50%, -50%)

img {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

固定定位 position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

• 脱标，不占位

• 显示模式具备行内块特点

• 设置边偏移相对浏览器窗口改变位置

堆叠层级 z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

2.CSS修饰属性

垂直对齐方式 vertical-align

解决文字和图片不居中,谁占的高度最大就给谁加

过渡 transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

• 过渡的属性可以是具体的 CSS 属性

• 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

• transition 设置给元素本身

透明度opacity

属性值：0 – 1

• 0：完全透明（元素不可见）

• 1：不透明

• 0-1之间小数：半透明

光标类型cursor

鼠标悬停在元素上时指针显示样式