CSS定位方式
display属性
每一个元素都有默认的display属性，使用最多的是block, inline和inline-block，不常用的是table-cell。
根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:block元素可以设置宽度，独占一行。inline元素宽度由内容决定，与其他元素并列在一行。
常见的block属性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。
常见的inline属性元素有: span, a, em。
block
宽高可以自行设置，默认宽度由父容器决定，默认高度有内容决定。自己独占一行。
inline
宽度和高度都有内容决定，与其他元素共占一行。
inline-block
宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline。长用于设置垂直居中。
table-cell
此属性指让标签元素以表格单元格的形式呈现，单元格有一些比较特殊的属性，可以设置元素的垂直居中等。
position属性
元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。它其实是未被设置定位的。
元素如果被定位了，那么它的top,left,bottom,right值就会生效，能设置定位的属性是relative,absolute和fixed。
需要注意的另一点是被定位的元素层次(z-index)会得到提高。
relative（相对定位）
设置了相对定位之后，通过修改top,left,bottom,right值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
absolute（绝对定位）
设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（position值不为static）的元素。
且如果元素为块级元素（display属性值为block)，那么它的宽度也会由内容撑开。因为：
默认文档流中块级元素如果没有设置宽度属性，会自动填满整行。
fixed(固定定位)
设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。
参考资料
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论