Home >Web Front-end >HTML Tutorial >css定位机制详解 第一篇_html/css_WEB-ITnose
只要不指定,所有标签均在标准流中定位。块级标签由于独占一行,所以从上到下排列,而行内和行内块级则水平排列。
一切标签皆是框
通过position属性,我们可以选择四种不同类型的定位
talk is less show code!
static就不写了relative
<style> .left{ position: relative; left: -20px; } .right{ position: relative; left: 20px; background-color: blue; } .up{ position: relative; top: -20px; background-color: yellow; } .down{ position: relative; background-color: red; }</style><p>原始</p><p class="left">原始</p><p class="right">原始</p><p class="up">原始</p><p class="down">原始</p>
屏幕快照 2016-03-27 下午8.08.48.png
我们注意到,黄色的div由于设置了top: -20px,向上偏移了。但是关键的问题来了,接下的红色div仍是按照黄色div原先在文档流中的位置向下定位的,我们将top: -20px;的代码注释掉,结果如下
屏幕快照 2016-03-27 下午8.08.18.png
这就是relative中原本在正常文档流中所占空间仍保留的意思。