CSS知识点详解:position定位

news/2024/10/22 3:50:23/
htmledit_views">
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% */
}

http://www.ppmy.cn/news/1514586.html

相关文章

【vue3|第25期】Vue3中的useRoute:轻松访问路由信息

日期:2024年8月21日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉在这里插入代码片得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不…

(QT-UI)十三、通过定时器,实时更新时间轴

本系列预计实现 ①刻度上方文字显示, ②时间轴拖动效果, ③时间轴刻度缩放, ④时间轴和其他控件联动显示, ⑤鼠标放置到时间轴,显示具体时间。 ⑥通过定时器,实时更新时间轴 ⑦时间轴上绘制时间片 完…

使用Python编辑文件属性

一、使用Python设置文件的访问和修改时间 import os import time# 获取当前时间 now time.time()# 设置文件的访问和修改时间 os.utime(test.txt, (now, now)) os.utime(path, (time1,time2)) 参数解析 path:表示文件路径 ti…

PDF Shaper Ultimate v14.4 中文授权版

PDF Shaper是一款处理PDF的软件。PDF Shaper的功能有:合并,分割,加密和解密 PDF,图像转换为 PDF,PDF 转换为 RTF 或 图像,从 PDF 中提取文本和图像。 该版本已授权,可以免费使用。 软件截图&a…

每天一个数据分析题(四百八十八)- 非监督学习

关于非监督学习,在K-means聚类分析使用的距离是( ) A. 欧式距离 B. 绝对距离 C. Minkowski距离 D. 笛卡尔距离 数据分析认证考试介绍:点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项练习题库 内容涵盖Pyt…

K8s节点状态 NotReady排查

k8s节点由 Ready变成 NotReady izbp12ghzy6koox6fqt0suz NotReady slave 97d v1.23.3 izbp12ghzy6koox6fqt0svz Ready control-plane,master 98d v1.23.3节点进入 NotReady 状态可能是由于多种原因引起的,尤其是在资源过量分配&am…

Selenium工具使用Python实现下拉框定位操作

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 我们通常遇到的下拉框有显性的下拉框和隐性的下拉框;有的下拉框还可以进行单选或多选操作,在selenium中如何实现下拉框的定位通常使用selec…

未来的社交网络:人工智能如何推动Facebook的发展

在当今数字化飞速发展的时代,人工智能(AI)已成为推动各行业进步的核心动力之一。社交媒体巨头Facebook凭借其在人工智能领域的深厚积累,正逐步将AI技术融入平台的各个方面,重新定义用户体验,并引领社交网络…