Css定位与background 属性

一、关于定位

我们可以使用 Css 的 position 属性来设置元素的定位类型， postion 的设置项如下：

• relative生成相对定位元素，元素所占据的文档流的位置不变， 元素本身相对文档流的位置进行偏移

• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位 置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或 者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对 于 body 元素进行定位

• fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置， 可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位

• static默认值，没有定位，元素出现在正常的文档流中，相当于取 消定位属性或者不设置定位属性

• inherit从父元素继承 position 属性的值
  定位元素特性
  绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
  定位元素层级
  定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设 置元素的层级
  典型定位布局如下：

  1. 固定在顶部的菜单
  2. 水平垂直居中的弹框
  3. 固定的侧边的工具栏
  4. 固定在底部的按钮

二、background 属性

属性解释
background 属性是 Css 中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background 是一个复合属性，它可以分解成如下几个设置项：

• background-color 设置背景颜色
• background-image 设置背景图片地址
• background-repeat 设置背景图片如何重复平铺
• background-position 设置背景图片的位置
• background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用 background 属性将上面所有的设置项放在一 起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如： “background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置 background-color； “url(bgimage.gif)”是设置 background-image；“no-repeat”是设置 background-repeat； “left center”是设置 background-position；“ fixed” 是设置 background-attachment，各个设置项用空格隔开，有的设置项不写 也是可以的，它会使用默认值。