CSS知识点详解：position定位

li:{
  position:absolute;
  right:30px;
}

绝对定位和它的祖先元素：

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

如果有祖先元素，就会以离它最近的一个祖先元素为基准，所以我们经常使用：

这样可以使父级元素既不脱离标准文档流，不会对其他元素造成干扰

父级有了定位，子级就可以在父级里乱动，减少了麻烦

父级只加：position:relative;
子级用： position:absolute; 

fixed：固定定位

li:{
  position:fixed;
  right:30px;
}

偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

sticky：卡住不动的那种

这种效果能够让元素在页面滚动到一定程度时固定在某个位置

eg：

例如，如果要使一个元素在滚动到距离页面顶部0像素时固定，

.sticky-element {
    position: sticky;
    top: 0;
}

注意：

z-index：设置层级

只有用了定位后才能使用z-index

整数，默认值为0

当设置了position定位时，z-index的值越大，就在上面

有时候设置z-index的值为100001，是希望这个定位在最上方

网页元素透明度：

opacity：x

x值为0~1，值越小越透明

缺点是盒子中的字也会变透明

所以我们可以使用rgba，不会让字变透明

div{
  opacity:0.5
}

filter:alpha(opacity=x）

x值为0~100，值越小越透明

div {
    filter: alpha(opacity=0.5); /* 设置元素透明度为50% */
}