2-absolute 布局理解

常用的定位属性

  • (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>

引用 : http://www.imooc.com/search/course?words=absolute

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,278评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,366评论 0 5
  • position属性比起其他的基础属性来讲要复杂一些,我在这试着把里面的门道全部总结出来。 目前position有...
    microkof阅读 3,201评论 3 4
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,505评论 0 6
  • 1.显示隐藏动画 show()方法(1): (2): (3): (4): hide()方法(同show一样)$("...
    MGd阅读 2,028评论 0 0