CSS中Position属性，零基础设计师怎么学绘画

CSS中的Position属性它是一个常见的属性，可以帮助你在网页布局中掌握定位元素的位置和方法。

首先，我们来看看Position的意思是什么。字面意思是"位置"，“方位”或者“姿态”，在CSS中Position属性常常用于设定一个元素的“位置”，它掌握着强大的定位能力，可以将普通的HTML元素按照指定的方位进行排列布局，大大丰富了网页的表现形式，使网页更加多样化。CSS中的Position属性共有4个属性值，它们分别是：static（静态定位）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。下面，我们逐一介绍一下这4种定位属性的含义和用法：

1. static（静态定位）

首先，要了解“静态定位”，你必须先知道其它3种定位方式。因为除了static定位之外，其余三种都因为“非普通定位”而叫作特殊定位。静态定位是默认的定位方式，它不需要定义，当父元素用该属性时，子元素无法受到影响，子元素的位置会自动呈现默认的排列位置（行内或块级）。因此，当你不使用任何定位属性时，元素默认使用的即是静态定位。

2. relative（相对定位）

相对定位，主要应用于相对原有位置的偏移量，相对定位是以当前元素本身为参考进行位置调整，而不对其它元素造成影响，它可以通过top、right、bottom和left这4个属性值来进行微调，使得定位元素沿当前语言书写顺序在水平或垂直方向上发生偏移，而不会影响到其它元素。

3. absolute（绝对定位）

绝对定位是相对于父元素来进行定位的，当使用绝对定位后，浏览器会忽略掉其它元素对它的影响，对Father（父元素）进行定位，父元素即定界盒。绝对定位让元素脱离文档流，所以随意的对定位的元素进行上下左右移动都是可以的，此时我们可以为这个元素设置宽度和高度，因为这个元素已经不受它的父元素约束了，所以让它脱离文档流、自言自语的变得自由了。

4. fixed（固定定位）

固定定位是相对于浏览器窗口作为参考，这意味着当你使用固定定位的时候，元素不随页面的滚动而滚动，而是出现在浏览器窗口的固定位置。固定定位是HTML5中刚刚出现的特性，它可以帮助设计师实现网站中类似于"返回顶部"、"浮动广告"等需求，使得页面扁平化程度更高，视觉效果更出色。

总结一下，position属性是网页中实现定位效果的必备工具，它不仅涉及了HTML和CSS的基本知识，同时还涉及了Web前端工程师的整体布局设计思路和精神。因此，在学习Position属性时，需要仔细思考，如何合理地运用这些技巧，才能不断提高网页设计水平，为用户呈现更好的浏览体验。