【郑州-第134期】position定位。

大家好,我是IT修真院郑州分院第五期学员王姝丽,一枚正直善良的web程序员。

今天和大家分享一下,修真院官网css3任务中,position定位。

1.背景介绍

CSS中一共有三种基本定位机制:普通流、浮动、绝对定位。 如果不进行专门指定,所有的标签都在普通流中定位。 块级元素从上到下一个接一个的排列,框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。

CSS定位方式有四种:默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)

2.知识剖析

static是position属性的默认值,无特殊定位。然后既然是默认值,是不是就没有用了,其实static也是很有用的,当两个页面同时需要用到同一个样式时,一个需要定位,另一个不需要时,就可以用到position:static;

position: relative; 相对定位。 相对于自己原本的位置进行定位。 在文档流中,元素偏移前的位置保留。 一般用于给absolute元素一个定位参照物。 该元素偏移之后,可能存在覆盖其他元素的情况,可以使用z-index属性。

position: absolute; 绝对定位。 相对于第一个设置了定位属性除了static定位以外的祖先元素进行定位,如果当前父元素没有定位属性,那么就会一直向上寻找,如果都没有,那么会相对于html元素定位。 脱离文档流。

position: fixed; 固定定位 相对于浏览器窗口进行定位,当滚动页面时,具有position:fixed;属性的元素不会随滚动条滚动。 脱离文档流。 一般用于页面的广告,固定顶栏等。

3.常见问题

(1)如何让一个固定宽高的元素在页面上垂直水平居中?

(2)什么是z-index?

4.解决方案

(1)可以配合使用margin: 块级元素宽高的一半的负值; 实现块级元素的垂直居中。

(2)如果这个页面是二维的,那z-index就处于三维中,如图所示:

z-index 这个属性控制着元素在z轴上的表现形式。

堆叠顺序是当前元素位于z轴上的值。数值越大表明元素的堆叠顺序越高,越靠近屏幕。离我们眼睛所看到的越近。

就像这样的

5.扩展思考

fixed属性一般都用来做什么?

6.参考文献

参考一:静如秋月的博客

参考二:Pet的博客

6.更多讨论

浮动和对其他元素的影响

ppt链接

感谢大家观看!

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !

我的学习邀请码:12164783    或者你可以直接点击此链接:http://www.jnshu.com/login/1/12164783

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 1,126评论 0 3
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,856评论 0 15
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,969评论 0 7
  • 时间总是过得特别的快。 这一周学了很多东西,也想得特别多。一直在想2017年,我到底想要的是什么? 听时间管理和缠...
    阿甘的蜗牛屋阅读 333评论 0 0