CSS定位

一、定位

1.默认值

position:static;   无特殊定位，遵循html默认显示原则

2.绝对定位

position:absolute;

参照物：离它最近的具有定位属性的父包含块，如果找不到满足条件的父包含块，相对于浏览器窗口进行定位

注：我们通过left,right,top,bottom来确定元素定位的具体位置

3.相对定位

position:relative;

参照物：元素偏移前自身的位置

注：相对定位也通过left,right,top,bottom来决定元素偏移的位置

4.固定定位

position:fixed;

参照物：屏幕窗口

注：通过left,right,top,bottom来确定元素定位的具体位置

注：相对定位不会脱离文档流，定位后，原来的位置保留不会被其他元素占据

    绝对定位和固定定位会脱离文档流，定位后，原来的位置不保留，会被其他元素占据

扩展：position:sticky;  粘性定位，是relative和fixed的结合体

二、锚点链接

作用：实现在本页面内不同位置的跳转

语法： 命名锚记名  <元素  id="锚记名"></元素>

      连接锚记名   <a href="#锚记名"></a>

三、透明度设置

语法： opacity:数值;    取值范围0~1，0为完全透明，1为完全不透明

eg:  opacity:0.5;   等价于  opacity:.5;

注：给容器设置opacity后，里面的图片文字都会具有这样的透明度

eg:  background:rgba(0,0,0,0.5);   a代表透明度，取值范围0~1

注：rgba设置的透明度只是背景会具有这个透明度，容器中的文本图片不受影响

四、定位层叠属性

语法：z-index:auto(默认值)|整数;

注：页面中设置了position属性的元素会按照书写的先后顺序，后写的优先显示在最上层，当设置z-index后，值越大，层越靠上