一定位介绍
定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实 现的.
二定位类别
1.相对定位
相对定位就是相对于自己以前在标准流中的位置来移动
语法:
position: relative; 配合left, top, right,bottom等属性使用 特点
相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素
设置margin/padding等属性的时会影响到标准流的布局
2.绝对定位
默认情况下绝对定位就是相对于body来定位
语法
position: absolute; 配合left, top, right,bottom等属性使用 特点
绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素
如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是
以整个网页的宽度和高度作为参考点
默认情况下绝对定位就是相对于body来定位, 但是如果一个绝对定位的元素有祖先(父亲,爷爷)元素, 并且
祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点
3. 固定定位
固定定位可以让某个盒子(元素)不随着滚动条的滚动而滚动
语法
position: fixed; 配合left, top, right,bottom等属性使用 特点
固定定位的元素是脱离标准流的, 不会占用标准流中的空间
固定定位和绝对定位一样不区分行内/块级/行内块
三定位属性的应用
1. 效果
2. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>猫眼电影</title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="box">
<img src="img/film.jpg">
<span class="tip">3D</span>
<span class="fileName">谜巢</span>
<span class="buyTicket">购 票</span>
</div>
</body>
</html>