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% */
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值