CSS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。

需求：当页面很长，有滚动条时，需要固定页面上的部分元素，便于下方元素和上方固定元素的对照。

.box1{
				width: 100%;
				height: 50px;
				background: skyblue;
			}
			.box2{
				width: 100%;
				height: 50px;
				background: darkorange;
				position: sticky;
				top: 0;
			}
			.box3{
				width: 100%;
				/*height: 1000px;*/
			}

这几天刚开始写一个Vue项目，遇到了一个定位问题，觉得挺有意思的，这里分享给大家。

其实就是一个首页顶部固定的问题，一提到顶部固定，相信大家都第一反应是想到了

position:fixed;

下面来看一下这个页面

呃，其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。

float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。

float从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。

背景位置（background-position）属性控制元素的背景图像或颜色位置。它是控制元素视觉外观和用户体验的强大工具。

背景位置的属性

background-position属性有以下属性：

* x 坐标：水平位置（left、center、right或数字）

* y 坐标：垂直位置（top、center、bottom或数字）

引入

在前端界面设计中，会有那么一些布局，需要占满整个父级容器，比如：

以上两种组件中，都是将背景完全填充到父级容器，区别在于模态框通常是背景填满屏幕，通常使用

今天学习之前剩下的一个问题：CSS的position属性。首先归纳出和position相关的问题：

1. position作为一个属性，它一共有哪几个属性值？
2. position常用的属性值有哪几个？分别有什么特点？

对于position属性，他一共有5个值，分别是

1. static：默认值。没有定位，元素出现在正常的流中。
2. relative：生成相对定位的元素，相对于其正常位置进行定位。正常位置也就是指如果没有position属性它会出现的位置。

提示：点击上方"蓝色字体"↑ 可以订阅噢！

摘要 51RGB官方微信position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。

基础知识

postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。

1 简介

上一篇文章，介绍了魔鬼属性——浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局使用户精准定位页面中的任意元素成为可能。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。