CSS 几种定位方式的区别

static(静态定位)

  • 默认值,设置 top,right,bottom,left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。

relative(相对定位)

  • 元素相对自身偏移某个位置,元素扔保持其未定位的形状,它原本所占用的空间扔保留,可以通过 z-index 进行层次分级,子元素可相对该元素进行绝对定位;

absolute(绝对定位)

  • 元素从文档流完全删除(会脱离文档流), 相对于其最近的父级块元素(如果父级元素 position 为 static 时,absolute 元素将继续向上级查找,直到找到 body,以 body 坐标原点进行定位),元素原先在正常文档流中所占的空间会关闭,元素定位后生成一个块级框,可以通过 z-index 进行层次分级;

fixed(固定定位)

  • 它所相对固定的对象是可视窗口,与其他无关,可以通过z-index 进行层次分级。

  • 另外还有一个 float(浮动定位)

  • 这种定位方式很简单,只需要执行一个浮动的方向(例如: float: left;就表示这个元素向左边摆放),它的定位是 相对于父元素 容器;

注意: 如果该元素设置了浮动,后面紧邻的则会受到浮动的影响,因此需要后面的元素 ·清除浮动· (例如可以用 clear: both; 或者父元素添加 overflow: hidden 等方法)。在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放,这种定位也是会使元素 脱离文档流

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,251评论 0 6
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 658评论 0 0
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,825评论 0 15
  • 昨日打扫卫生时突然看见那铺了一地的黄叶,自觉秋已深。走近时方觉得这南方的银杏终究撑不出家里那么大的叶子。 回来查了...
    嚴小天阅读 175评论 0 0