CSS定位

112 阅读1分钟

1,position 的默认值为static (静态定位),如果把它修改成其他值时,我们称元素被定位了

2,fixed  固定定位

  • 与left、top、bottom、right一起使用
  • 表示与浏览器视口边缘的距离
  • 隐藏的设置元素的宽度或高度,如设置left:2em  right: 2em ,则元素的宽度就是视口宽减4em,其他以此类推。 例: 模态框

3,relative 相对定位

  • 相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局
  • 一般不直接用来设置定位
  • 常用为:给它里面(子元素)的绝对定位设置一个包含块     ( 父相子绝)
4,absolute 绝对定位
  • 与left、top、bottom、right 一起使用
  • 表示元素边缘在  包含块()  里的距离
  • 在父元素没有设置相对定位或绝对定位的情况下,元素相对于根元素定位(即html元素)(是父元素没有)
  • 元素会脱离文档流,如果设置偏移量,会影响其他元素的位置定位
  • 元素在没有定义宽度的情况下,宽度由元素里面的内容决定,效果和用float方法一样。
  • 父元素设置了相对定位或绝对定位,元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位

5,sticky 粘性定位

  • 相对定位和固定定位的结合体
  • 元素会随着页面的滚动,到达屏幕的特定位置时,如果用户继续滚动,他就会锁定在这个位置,比较常见的用例:侧边导航栏