【Day08】定位锚点透明

学习内容

• 定位概述
• 元素堆叠属性
• 锚点链接
• 透明度

定位概述

定位: 让元素在页面任意位置上显示 position
属性值:
static 静态定位 不定位 (默认)

relative 相对定位
1.参照物: 相对于元素自身进行偏移，单独使用时，页面展示效果跟margin类似
2.占原空间位置

absolute 绝对定位
1.参照物: a.相对于body进行定位 b.父相子绝．相对于最近的且带有定位元素的父元素进行偏移
2.不占原空间位置: 完全脱离文档流

fixed 固定定位
1.可视窗口
2.不占位置

sticky粘性定位
滚动条出现之前是相对定位
滚动条出现之后是固定定位

偏移量: left right top bottom
属性值: 数值+单位/% 可以为负值

元素堆叠属性

元素堆叠属性: z-index 一定要搭配position使用
属性值: 整数值 能为负值 (没有范围限制) 值越大的，优先显示
        auto 默认写在后面的优先显示

锚点链接

锚点链接: 跳转到页面指定位置
定义锚点名
<div id="锚点名"></div>

开始锚点跳转
<a href="#锚点名"></a>

实现元素水平垂直方向完全居中
left: 50%
top: 50%
margin-left: 自身宽度的一半
margin-top: 自身高度的一半

透明度

透明度写法
1.rgba(0-255,0-255,0-255,0-1); a表示alpha 透明度 只支持IE8以上
2.opacity 范围: 0-1 不兼容IE9以下
3.filter: alpha(opacity=) 兼容写法 opacity的取值范围是0-100