18.定位文档说明

定位:
定位属性: position
定位属性值:
1) relative: 相对定位
参照物: 元素本身的文档流位置
文档流状态: 不脱离文档流
移动方式: 通过top,bottom,left,right属性移动元素
常用单位px
正数向元素内部移动. 例: top: 50px; 向下移动50px
bottom: 20px; 向上移动20px
left: 20px; 向右移动20px
负数向元素外部移动.
特点: 相邻元素如果使用相同的相对定位移动效果, 则移动后相对位置不变

2) absolute: 绝对定位
参照物: 2种状况
[1] 定位的元素的父元素和祖级元素都没有开启任何的定位效果:
以浏览器四边为参照
[2] 定位的元素的父元素或祖级元素至少有一个开启了定位效果:
以最近的开启了定位效果的祖级元素为参照
文档流状态: 脱离文档流
特点: 同一个父元素的子元素使用相同的定位效果时, 会移动到相同的位置
常见的应用场景: 将子元素定位到父元素的四角

3) fixed: 固定定位
参照物: 固定以浏览器四边为参照
文档流状态: 脱离文档流
与绝对定位的区别:
固定定位: 一直定位在可视范围内容指定位置, 不会因为页面滚动而变化
绝对定位: 只定位在当前可视范围内容指定位置, 页面滚动时会移动

定位效果的使用步骤:
1) 开启定位效果. 为position设置以上3个值之一
2) 移动

层叠属性: z-index, 决定元素重叠时的显示顺序.
值为整数, 可以是负数, 数值越大的优先被看到, 默认0

不透明度属性: opacity, 设置不透明度. 默认1. 值为0~1之间的小数.

标签：定位,效果,18,元素,文档,20px,移动
来源： https://www.cnblogs.com/wgbl/p/16116715.html