常用的定位屬性
- (1) static : 常規(guī)框年叮，默認(rèn)值砂轻。
- (2) relative : 相對(duì)定位拱礁，在元素沒有定位之前的位置上進(jìn)行定位守伸，并且它原本所占的空間仍為其保留绎秒。
- (3) absolute : 絕對(duì)定位，在沒有設(shè)置left,top,bottom,right時(shí)尼摹，它將在沒有定位之前的位置上脫離文檔流见芹，不占空間，后面的元素將會(huì)替代它的位置蠢涝，并且有層級(jí)的概念玄呛。它總是在文檔流的上面，除非手動(dòng)設(shè)置z-index屬性惠赫。如果設(shè)置了left,top,bottom,right時(shí)把鉴，它將按照設(shè)置進(jìn)行定位故黑，如果它不是在一個(gè)定位的父元素里面(除static外)儿咱，那么它的起點(diǎn)將在窗口的左上角，反之场晶，它的起點(diǎn)將在父元素的位置上進(jìn)行定位混埠。一個(gè)行內(nèi)元素，一旦設(shè)置了此屬性诗轻，則會(huì)轉(zhuǎn)變成塊元素钳宪。
- (4) fixed : 固定定位，參照物是按照瀏覽器窗口定位扳炬，設(shè)置了fixed的元素就像被固定住了一樣吏颖，它不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)。一個(gè)行內(nèi)元素設(shè)置了此屬性后恨樟，將被轉(zhuǎn)變成塊元素半醉。
理解 absolute 和 relative
- 2:
- relative 相對(duì)于自己進(jìn)行定位
- absolute 相對(duì)于父元素進(jìn)行定位
absolute
- absolute 有包裹性和破壞性 脫離了文檔流 等特性
- 包裹性 就是 讓元素?fù)碛辛?inline-block 寬高限制
- 破壞性 父級(jí)標(biāo)簽塌陷 父級(jí)沒有設(shè)置高度，由子元素?fù)沃笆酢ＴO(shè)置 absolute 的時(shí)候就會(huì)高度塌陷
父級(jí)使用 relative 和 使用 z-index 可以限制 absolute
demo
使用absolute 不依賴父級(jí)元素的 relative 來設(shè)置 ==VIP== 和 ==推薦== 缩多， ==求課==的布局
直接看下面鏈接
http://sandbox.runjs.cn/show/p8jzufcc
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圖標(biāo)定位二三事</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 class="nav-a">課程</a>
</h3>
<h3 class="nav-list">
<a class="nav-a">問答</a>
</h3>
<h3 class="nav-list">
<a class="nav-a">
求課<i class="icon-hot"></i>
</a>
</h3>
</div>
</div>
</div>
<div class="main">
<div class="constr">
<div class="course">
<a class="course-list">
<div class="course-list-img">
<span class="icon-recom">推薦</span>
<img width="280" height="160" alt="分享：CSS深入理解之float浮動(dòng)" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
--><i class="icon-vip">vip</i>
</div>
<h5 class="course-list-h">分享：CSS深入理解之float浮動(dòng)</h5>
<div class="course-list-tips">
<span class="l">已完結(jié)</span>
<span class="r">3514人學(xué)習(xí)</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
