CSS之定位属性

标签：允许   cccccc   type   移动   tick   滚动条   标准   布局   list   

一,定位介绍

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

二,定位类别

1.相对定位

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

2. 语法:

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. 特点

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

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

三, 定位属性的应用

效果

代码实现

* {

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;

/* height: 20px;*/

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;

}

3D

谜巢

购 票

CSS之定位属性

标签：允许   cccccc   type   移动   tick   滚动条   标准   布局   list   

原文地址：https://www.cnblogs.com/cqqfboy/p/14693694.html