css -positon(定位)

1. position共有五个属性值:

static(默认)
absolute
fixed
relative
sticky

2. static (默认)

当position:static时 元素的left right top bottom 四个属性将无效 就算设置了也没有任何的作用

3.fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
适用场景:页面中的悬浮按钮,(eg 一键置顶按钮、固定在某个位置的按钮不随页面滚动而影响)
注意:
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素可能会出现与其他元素重叠的现象。

3. relative 定位

相对定位元素的定位是相对其正常位置。是相对于自己正常情况下的位置,此时若移动位置 以前的位置依然存在 ,依旧占着原来的坑位(移动相对定位元素,但它原本所占的空间不会改变)。

4.absolute 定位

对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,515评论 0 5
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,865评论 0 15
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 667评论 0 0
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?浮动的元素会脱离文档流,向左或者向右移动...
    饥人谷_wanpp阅读 700评论 0 49