css定位机制详解 第一篇_html/css_WEB-ITnose
程序员文章站
2022-03-26 09:16:25
...
css有三种定位机制
- 标准流
- 浮动
- 绝对定位
只要不指定,所有标签均在标准流中定位。块级标签由于独占一行,所以从上到下排列,而行内和行内块级则水平排列。
css position
一切标签皆是框
通过position属性,我们可以选择四种不同类型的定位
- static:按标准流定位(村里分地,按照规则正常分)
- relative:框偏移某个距离,原本在正常文档流中所占空间仍保留(我分来的地我不种,但还是我的,你分的还是按规则分来的地)
- absolute:框从正常文档流中删除(我退出分地,接下来的人可以分这块地),相对于其包含块定位(从父块一直向上找,找到一个不是static的包含块,相对于其定位)
- fixed:类似于absolute,不过包含块直接设置为窗口。
talk is less show code!
static就不写了relative
原始
原始
原始
原始
原始
屏幕快照 2016-03-27 下午8.08.48.png
我们注意到,黄色的div由于设置了top: -20px,向上偏移了。但是关键的问题来了,接下的红色div仍是按照黄色div原先在文档流中的位置向下定位的,我们将top: -20px;的代码注释掉,结果如下
屏幕快照 2016-03-27 下午8.08.18.png
这就是relative中原本在正常文档流中所占空间仍保留的意思。
上一篇: 如何设置一种较为安全的Cookie以保存登陆状态?
下一篇: php扩展AMQP,安装报错解决
推荐阅读
-
CSS三种机制及优先级问题_html/css_WEB-ITnose
-
css3 设置背景定位_html/css_WEB-ITnose
-
CSS的padding用法详解_html/css_WEB-ITnose
-
css3:box-shadow边框阴影属性值详解_html/css_WEB-ITnose
-
HTML数组详解_html/css_WEB-ITnose
-
div+CSS绝对定位absolute属性_html/css_WEB-ITnose
-
CSS 2.1 中三种定位方案的分析_html/css_WEB-ITnose
-
「CSS3 」动画详解_html/css_WEB-ITnose
-
Css fixed和absolute定位区别_html/css_WEB-ITnose
-
父元素设置overflow:hidden对定位元素也有效_html/css_WEB-ITnose