一,定位介绍

定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的.

二,定位类别

1.相对定位相对定位就是相对于自己以前在标准流中的位置来移动

语法:position: relative; 配合left, top, right,bottom等属性使用

3. 特点

- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

- 在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom

- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素

- 设置margin/padding等属性的时会影响到标准流的布局

2.绝对定位

1. 默认情况下绝对定位就是相对于body来定位

2. 语法position: absolute; 配合left, top, right,bottom等属性使用

3. 特点

- 绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素

- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是

以整个网页的宽度和高度作为参考点

- 默认情况下绝对定位就是相对于body来定位, 但是如果一个绝对定位的元素有祖先(父亲,爷爷)元素, 并且

祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点

3.固定定位

1. 固定定位可以让某个盒子(元素)不随着滚动条的滚动而滚动

2. 语法position: fixed; 配合left, top, right,bottom等属性使用

3. 特点

- 固定定位的元素是脱离标准流的, 不会占用标准流中的空间

- 固定定位和绝对定位一样不区分行内/块级/行内块

三, 定位属性的应用

效果

代码实现html>

猫眼电影

* { margin: 0px; padding: 0px; }

.box { width: 200px; height: 320px; border:1px solid #cccccc; margin: 0px auto; margin‐top: 50px; position: relative;}

.box img { width: 200px; height: 280px; }

.box .tip { width: 30px; background‐color: #0084FF; line‐height: 20px; text‐align:center; font‐weight: bold; color: white; font‐size: 14px; font‐style: italic;position: absolute; left: ‐2px; top: 6px; }

.box .fileName { width: 60px;line‐height: 40px; color: white; font‐weight: 500; font‐size: 18px; font‐family:宋体; text‐align: center; position: absolute; left: 0px; bottom: 40px; }

.box .buyTicket{ width: 200px; line‐height:40px; text‐align: center; display: inline‐block; color: #EF4238; font‐family:宋体; font‐weight: 600; }