网站版权模板如何创建一个网站0元

基本思想

定位(position)允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
使用top,bottom,left,right属性的属性值来设置元素的位置。

作用

• 在正常情况下，可以让一个元素覆盖在另外一个元素上面
• 可以移动一个元素的位置
• 可以固定某个容器在浏览器窗口的某个位置不动
• 可以做吸顶效果，比如百度新闻的导航

五种定位方式

1、静态定位 static

  默认值。没有定位，元素出现在正常的页面流中（忽略 top, bottom, left, right 或者 z-index 声明）
  如果省略position属性，浏览器就认为该元素是static定位

2、相对定位 relative

• 如果没有定位偏移量，对元素本身没有任何影响
• 不使元素脱离文档流
• 不影响其他元素布局
• 移动位置的时候参照物是当前元素自身（初始位置的左上角）
• 多个元素相对定位之后，如果没有移动位置，那么他们之间就不会覆盖现象。如果移动了位置，那么后面的元素就是会覆盖前面的元素（可以通过z-index改变层叠顺序）

没有使用相对定位时：
效果：
此时给第二个div添加相对定位的声明：
效果：
第二个div则相对于初始的位置向左、向下分别移动50px。
注意：其原先的位置还是会保留的，也就是未脱离文档流。

3、绝对定位 absolute

• 元素脱离文档流
• 使内联元素支持宽高
• 使块元素默认宽根据内容决定
• 如果祖先元素有定位（绝对、相对、固定），则相对于祖先元素发生偏移;祖先元素没有定位，则相对于整个文档（左上角）发生偏移
• 如果多个元素同时给了绝对定位，他们之间的层叠顺序是，结构在后的元素在最上面.（可以通过index改变层叠顺序）

不使用绝对定位：
效果：
此时给最外层的父元素div添加相对定位（也可以是绝对、固定），给第二个子元素添加绝对定位：
效果：
很明显可以看到第二个div此时移动的参照物是添加了相对定位的父元素，而且脱离了文档流（处于正常文档流的第三个div上去了）
注意点：浮动也会使元素脱离文档流，但是被浮动元素覆盖的元素，若里面有文字内容，那么文字则会环绕浮动元素周围显示。而被绝对定位元素覆盖的元素，里面的文字便会被全覆盖，不会环绕显示

4、固定定位 fixed

• 脱离文档流
• 使内联元素支持宽高
• 使块元素默认宽根据内容决定
• 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
• 多个元素同时给了固定定位，结构上后面的元素会盖在最上面，固定定位的层叠顺序也可以用z-index改变

常用于右下角“返回顶部”、弹窗等。
不使用固定定位：
效果：
此时给红色边框的div添加固定定位：
效果：
很明显可以看到固定定位的元素的参照物是整个浏览器窗口，而且也是脱离的正常的文档流（处于正常文档流的蓝色边框div上去了），之后该元素就固定在这个位置了，拖动窗口的时候，不再改变。

5、粘性定位 sticky

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)。
常用于用于页面滚动的时候的定位，可以方便实现吸顶条的效果；表格的表头锁定；堆叠效果等
例如：百度新闻的导航栏
当向下拖动滚动条的时候，导航栏就会固定在顶部
注意：

• 父元素不能overflow:hidden或者overflow:auto属性。
• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
• 父元素的高度不能低于sticky元素的高度
• sticky元素仅在其父元素内生效