里米的博客

前端技术相关

css 定位position

介绍定位

静态定位 static

将元素放入它在文档布局流中的正常位置

相对定位 relative

占据在正常的文档流中

position: relative;
top:10px;
left;20px;

relative需要配合top left等使用

绝对定位absolute

不存在于文档流
它坐在它自己的层独立于一切,意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如,弹出信息框和控制菜单;翻转面板;可以在页面上的任何地方拖放的UI功能……

会垂直居中

positionabsolutetop:0;
left:0;
right:0;
bottom:0;

定位上下文

哪个元素是绝对定位元素的“包含元素”? 默认情况下,它是元素——定位的元素是被嵌套在中的HTML源代码,但在最终的布局,它离页面边缘的顶部和左侧30px距离,这是元素。 这更准确地称为元素的定位上下文。

我们可以改变定位上下文——绝对定位的元素相对于其定位的元素。 这是通过在元素的其他祖先之一上设置定位来实现的——它是嵌套在其中的元素之一

介绍z-index

用过z-index 来控制哪个元素在前边

固定定位 fixed

这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

阅读更多
文章标签: css position
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭