美文网首页
css 定位

css 定位

作者: 占星_fc3b | 来源:发表于2020-12-23 16:49 被阅读0次

    一、position属性

    1.position-static

    静态定位、常规定位、自然定位

    作用:使元素定位于常规、自然流中

    (块、行垂直排列下去、行内水平从左到右)

    特点:

    忽略top bottom left right 或者 z-index 声明。

    两个相邻的元素如果都设置了外边距,那么最终外边距等于两者外边距中最大的。

    具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中

    2.position-relative

    相对定位

    作用:

    使元素成为可定位的祖先元素

    特点:

    可以使用 top right botton left z-index进行相对定位

    相对定位的元素不会离开常规流

    任何元素都可以设置relative,他的绝对定位的后代都可以相对于他进行绝对定位

    可以使浮动元素发生偏移,并控制他们的堆叠顺序

    3.position-absolute

    绝对定位

    作用:使元素脱离常规流

    特点:

    脱离常规流

    设置尺寸要注意:百分比比的是最近定位祖先元素

    如果没有最近的祖先元素,会默认为body为祖先元素

    上下左右如果设置为0,它将对齐到最近定位祖先元素的各一边---衍生出一个居中秒计

    上下左右如果设置为auto 它将被打回原形

    z-index可以控制堆叠顺序

    4.position-fixed

    固定定位

    固定定位相对于视觉窗口做定位。

    固定定位元素不会随着视口滚动而滚动

    5.position-sticky

    磁贴定位 粘性定位 吸附定位

    作用:relavtive与fixed的完美结合,制造出吸附效果

    特点:

    如果发生偏移,原位置还是会在常规流中

    如果它的最近祖先元素有滚动 那么他的偏移标尺就是最近的祖先元素

    如果最近的祖先元素没有滚动 那么他的偏移标尺是视口

    上下左右的偏移规则

    相关文章

      网友评论

          本文标题:css 定位

          本文链接:https://www.haomeiwen.com/subject/kghunktx.html