美文网首页
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定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • css 定位 浮动

    定位 1 . css 定位:改变元素在页面上的位置2 . css 定位机制:普通流浮动绝对布局3 . css 定位...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • CSS 定位

    CSS定位 CSS 定位机制 CSS中一共有三种基本定位机制:普通流、浮动、绝对定位。如果不进行专门指定,所有的标...

  • 图片精灵

    div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css ...

  • 元素定位

    八大定位 Xpath定位 css定位

  • CSS定位与浮动2016/6/12

    CSS 定位 (Positioning) CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 position...

网友评论

      本文标题:css 定位

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