position是什么意思(position)

大家好，今天来为大家分享position是什么意思的一些知识点，和position的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

1.CSS布局的三种机制

网页布局的核心——就是用CSS来摆放盒子位置。

CSS提供了3种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：

2.为什么使用定位

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？

1.小黄色块在图片上移动，吸引用户的眼球。

2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的

结论：要实现以上效果，标准流或浮动都无法快速实现

将盒子定在某一个位置自由的漂浮在其他盒子(包括标准流和浮动)的上面

所以，我们脑海应该有三种布局机制的上下顺序

标准流在最底层(海底)-------浮动的盒子在中间层(海面)-------定位的盒子在最上层（天空）

定位也是用来布局的，它有两部分组成：

简单说，我们定位的盒子，是通过边偏移来移动位置的。

在CSS中，通过top、bottom、left和right属性定义元素的边偏移：（方位名词）

边偏移属性示例描述toptop:80px顶端偏移量，定义元素相对于其父元素上边线的距离。bottombottom:80px底部偏移量，定义元素相对于其父元素下边线的距离。leftleft:80px左侧偏移量，定义元素相对于其父元素左边线的距离。rightright:80px右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

在CSS中，通过position属性定义元素的定位模式，语法如下：

选择器{position:属性值;}\n

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值语义static静态定位relative相对定位absolute绝对定位fixed固定定位

a.静态定位(static)-了解

b.相对定位(relative)-重要

c.绝对定位(absolute)-重要

绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀——子绝父相

刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？

子绝父相——子级是绝对定位，父级要用相对定位。

子绝父相是使用绝对定位的口诀，要牢牢记住！

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

d.固定定位(fixed)-重要

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

提示：IE6等低版本浏览器不支持固定定位。

4.定位(position)的案例

哈根达斯案例分析

课堂练习：模拟老师的随堂案例完成哈根达斯案例（5分钟）。

步骤1:顶部图片和底部内容

.top{\n/*注意：使用固定定位时，如果盒子中没有内容，需要指定宽度*/\nwidth:100%;\nheight:44px;\nbackground:url(images/top.png)no-repeattopcenter;\nposition:fixed;\nleft:0px;\ntop:0px;\n}\n?\n.box{\nwidth:1002px;\n/*顶部的44px的margin可以让box显示在顶部图片下方*/\nmargin:44pxauto;\n}\n

注意：

步骤2:左右两侧广告

\n.ad-left,\n.ad-right{\nposition:fixed;\ntop:100px;\n}\n?\n.ad-left{\nleft:0px;\n}\n?\n.ad-right{\nright:0px;\n}\n

注意：不要同时使用left和right和边偏移属性。

课堂练习：模拟老师的随堂案例完成仿新浪头部和广告案例（5分钟）。

5.定位(position)的扩展

注意：绝对定位/固定定位的盒子不能通过设置margin:auto设置水平居中。

在使用绝对定位时要想实现水平居中，可以按照下图的方法：

盒子居中定位示意图

课堂练习：实现盒子左中、右中、中上、中下、中中定位（5分钟）。

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。

应用z-index层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

注意：z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

前面我们讲过，display是显示模式，可以改变显示模式有以下方式:

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用paddingborderoverflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

6.综合演练-淘宝轮播图(重点)

淘宝轮播图布局步骤：

2、左按钮的定位，垂直居中（top：50%;和margin-top:-15px;），水平居左(left:0;)

3、左按钮样式（border-radius：左上，右上，右下，左下），4、右按钮定位，提取左右按钮共同的样式代码（并集选择器）

5、中间长方形椭圆ul的定位（水平居中，离底部15px）

6、长方形需要五个小圆点，ul无序列表，li浮动，椭圆中小圆点的样式

圆角矩形可以为4个角分别设置圆度，但是是有顺序的

\nborder-top-left-radius:20px;\nborder-top-right-radius:20px;\nborder-bottom-right-radius:20px;\nborder-bottom-left-radius:20px;\n如果4个角，数值相同

\nborder-radius:15px;\n里面数值不同，我们也可以按照简写的形式，具体格式如下:

\nborder-radius:左上角右上角右下角左下角;\n

还是遵循的顺时针。

定位模式是否脱标占有位置移动位置基准模式转换（行内块）使用情况静态static不脱标，正常模式正常模式不能几乎不用相对定位relative不脱标，占有位置相对自身位置移动不能基本单独使用绝对定位absolute完全脱标，不占有位置相对于定位父级移动位置能要和定位父级元素搭配使用固定定位fixed完全脱标，不占有位置相对于浏览器移动位置能单独使用，不需要父级

8.学成网定位总结添加

9.网页布局总结

一个完整的网页，有标准流、浮动、定位一起完成布局的。每个都有自己的专门用法。

可以让盒子上下排列或者左右排列的

可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。但是每个盒子需要测量数值。

关于position是什么意思，position的介绍到此结束，希望对大家有所帮助。