常用的定位属性
- (1) static : 常规框，默认值。
- (2) relative : 相对定位，在元素没有定位之前的位置上进行定位，并且它原本所占的空间仍为其保留。
- (3) absolute : 绝对定位，在没有设置left,top,bottom,right时，它将在没有定位之前的位置上脱离文档流，不占空间，后面的元素将会替代它的位置，并且有层级的概念。它总是在文档流的上面，除非手动设置z-index属性。如果设置了left,top,bottom,right时，它将按照设置进行定位，如果它不是在一个定位的父元素里面(除static外)，那么它的起点将在窗口的左上角，反之，它的起点将在父元素的位置上进行定位。一个行内元素，一旦设置了此属性，则会转变成块元素。
- (4) fixed : 固定定位，参照物是按照浏览器窗口定位，设置了fixed的元素就像被固定住了一样，它不会随着滚动条的滚动而滚动。一个行内元素设置了此属性后，将被转变成块元素。
理解 absolute 和 relative
- 2:
- relative 相对于自己进行定位
- absolute 相对于父元素进行定位
absolute
- absolute 有包裹性和破坏性 脱离了文档流 等特性
- 包裹性 就是 让元素拥有了 inline-block 宽高限制
- 破坏性 父级标签塌陷 父级没有设置高度，由子元素撑着。设置 absolute 的时候就会高度塌陷
父级使用 relative 和 使用 z-index 可以限制 absolute
demo
使用absolute 不依赖父级元素的 relative 来设置 ==VIP== 和 ==推荐== ， ==求课==的布局
直接看下面链接
http://sandbox.runjs.cn/show/p8jzufcc
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标定位二三事</title>
<style>
body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
body, h3, h5 { margin: 0; }
img { border: 0 none; vertical-align: bottom; }
.l { float: left; }.r { float: right; }
.constr { width: 1200px; margin-left: auto; margin-right: auto; }
.header { background-color: #2A2C2E; }
.nav { height: 60px; }
.nav-list { float: left; font-size: 14px; font-weight: 400; }
.nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
.nav-a:hover { color: #fff; }
.course { padding-top: 10px; }
.course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
.course-list-img { background-color: #6396F1; }
.course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
.course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }
.icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
.icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
</style>
</head>
<body>
<div class="header">
<div class="constr">
<div class="nav">
<h3 class="nav-list">
<a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/seek/index" class="nav-a">
求课<i class="icon-hot"></i>
</a>
</h3>
</div>
</div>
</div>
<div class="main">
<div class="constr">
<div class="course">
<a href="http://www.imooc.com/view/121" class="course-list">
<div class="course-list-img">
<span class="icon-recom">推荐</span>
<img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
--><i class="icon-vip">vip</i>
</div>
<h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
<div class="course-list-tips">
<span class="l">已完结</span>
<span class="r">3514人学习</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
网友评论