CSS深入理解之absolute（HTML/CSS）

absolute和float是同父异母的兄弟，因为它们具有相同点：包裹性与破坏性

absolute的特点

1、独立的，并且可以摆脱overflow的限制，无论是滚动还是隐藏；

2、无依赖，不受relative限制的，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值；

3、脱离文档流；

4、具有跟随性（依据这个特点，能省很多的relative，并且扩展性更强）。

骚操作：使用注释来消除空格

<!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>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本图标对齐与定位二三事</title>
    <style>
      body {
        margin: 0;
        font: 14px/1.4 "Microsoft YaHei";
        background-color: #EDEFF0;
      }
      a {
        color: #50B6E5;
      }
      .constr {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }
      .regist-head {
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        background-color: #be3948;
        color: #fff;
        font-size: 18px;
      }
      .regist-body {
        min-height: 400px;
        padding: 100px 0;
        background-color: #fff;
      }
      .regist-main {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
      }
      .regist-group {
        margin-top: 20px;
        overflow: hidden;
      }
      .regist-label {
        width: 70px;
        padding-top: 10px;
        float: left;
      }
      .regist-cell {
        display: table-cell;
        *display: inline-block;
      }
      .regist-input {
        height: 18px;
        line-height: 18px;
        width: 260px;
        padding: 10px 5px;
        margin: 0 10px 0 0;
        border: 1px solid #d0d6d9;
        vertical-align: top;
      }
      .regist-code-input {
        width: 130px;
      }
      .regist-btn {
        display: inline-block;
        width: 160px;
        line-height: 40px;
        background-color: #39b94e;
        color: #fff;
        text-align: center;
        text-decoration: none;
      }
      .regist-btn:hover {
        background-color: #33a646;
      }
      .icon-warn {
        display: inline-block;
        width: 20px;
        height: 21px;
        background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center;
      }
      .regist-star {
        position: absolute;
        margin-left: -1em;
        font-family: simsun;
        color: #f30;
      }
      .regist-remark {
        position: absolute;
        line-height: 21px;
        padding-top: 9px;
        color: #666;
      }
      .regist-warn {
        padding-left: 20px;
        color: #be3948;
      }
      .regist-warn>.icon-warn {
        position: absolute;
        margin-left: -20px;
      }
    </style>
  </head>

  <body>
    <div class="constr">
      <div class="regist-head">注册</div>
      <div class="regist-body">
        <div class="regist-main">
          <div class="regist-group">
            <label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
            <div class="regist-cell">
              <input type="email" class="regist-input"><span class="regist-remark regist-warn">
                        <i class="icon-warn"></i>邮箱格式不准确（演示）
                    </span>
            </div>
          </div>
          <div class="regist-group">
            <label class="regist-label"><span class="regist-star">*</span>登录密码</label>
            <div class="regist-cell">
              <input type="password" class="regist-input"><span class="regist-remark">
                        请输入6-16位密码，区分大小写，不能使用空格
                    </span>
            </div>
          </div>
          <div class="regist-group">
            <label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
            <div class="regist-cell">
              <input type="password" class="regist-input">
            </div>
          </div>
          <div class="regist-group">
            <label class="regist-label">手机号码</label>
            <div class="regist-cell">
              <input type="tel" class="regist-input">
            </div>
          </div>
          <div class="regist-group">
            <label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
            <div class="regist-cell">
              <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
            </div>
          </div>
          <div class="regist-group">
            <label class="regist-label">&nbsp;</label>
            <div class="regist-cell">
              <input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label>
              <p>
                <a href="javascript:" class="regist-btn">立即注册</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

z-index无依赖

1、如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；

2、如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index；

3、如果多个绝对定位交错，非常非常少见，z-index：1控制；

4、如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，请优化。

九宫格代码实现

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>高度自适应的九宫格效果</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      .page {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
      .list {
        float: left;
        height: 33.3%;
        width: 33.3%;
        position: relative;
      }
      .list:before {
        content: ‘‘;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        border-radius: 10px;
        background-color: #cad5eb;
      }
      .list:after {
        content: attr(data-index);
        position: absolute;
        height: 30px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        font: 24px/30px bold ‘microsoft yahei‘;
      }
    </style>
  </head>

  <body>
    <div class="page">
      <div class="list" data-index="1"></div>
      <div class="list" data-index="2"></div>
      <div class="list" data-index="3"></div>
      <div class="list" data-index="4"></div>
      <div class="list" data-index="5"></div>
      <div class="list" data-index="6"></div>
      <div class="list" data-index="7"></div>
      <div class="list" data-index="8"></div>
      <div class="list" data-index="9"></div>
    </div>
  </body>
</html>

绝对定位整页布局演示

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>慕课网-绝对定位整页布局演示</title>
    <style>
    body {
        font-family: ‘microsoft yahei‘;
      }
      /* wechat.css */

      body {
        margin: 0;
        -webkit-user-select: none;
        user-select: none;
        -ms-touch-action: none;
      }
      /* construction */

      html, body, .page {
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      .page {
        position: absolute;
        left: 0;
        top: 0;
      }
      body {
        background-color: #ebebeb;
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
      }
      a {
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-weight: 400;
      }
      ul, ol {
        margin: 0;
        list-style-type: none;
      }
      .header, .footer, .content {
        position: absolute;
        left: 0;
        right: 0;
      }
      .header {
        height: 48px;
        padding: 0 5px;
        background-color: #21292B;
        color: #fff;
        top: 0;
        z-index: 1;
      }
      .header>h1 {
        line-height: 48px;
        margin: 0 0 0 10px;
        font-size: 18px;
        float: left;
      }
      .header>a {
        display: inline-block;
        width: 48px;
        height: 48px;
        background-size: 48px 144px;
        text-indent: -9em;
        overflow: hidden;
      }
      .header>.icon-search, .header>.icon-add {
        float: right;
      }
      .footer {
        height: 52px;
        border-top: 1px solid #dfdfdf;
        background-color: #fcfcfc;
        bottom: 0;
        z-index: 1;
      }
      .footer>a {
        width: 25%;
        text-align: center;
        color: #999;
        float: left;
        font-size: 14px;
      }
      .footer>a>i {
        display: block;
        height: 35px;
        margin-bottom: -3px;
        background-size: 35px 280px;
      }
      .footer>.active {
        color: #45c018;
      }
      .content {
        top: 48px;
        bottom: 53px;
        overflow: auto;
      }
      .icon-search, .icon-back, .icon-add {
        background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat;
      }
      .icon-back {
        background-position: 0 -96px;
      }
      .icon-add {
        background-position: 0 -48px;
      }
      .icon-wechat, .icon-contacts, .icon-finds, .icon-mes {
        background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top;
      }
      .active .icon-wechat {
        background-position: center -35px;
      }
      .icon-contacts {
        background-position: center -70px;
      }
      .active .icon-contacts {
        background-position: center -105px;
      }
      .icon-finds {
        background-position: center -140px;
      }
      .active .icon-finds {
        background-position: center -175px;
      }
      .icon-mes {
        background-position: center -210px;
      }
      .active .icon-mes {
        background-position: center -245px;
      }
      .icon-find {
        background: url(icon-find.png) no-repeat;
        background-size: 28px 210px;
      }
      .icon-find-2 {
        background-position: 0 -30px;
      }
      .icon-find-3 {
        background-position: 0 -60px;
      }
      .icon-find-4 {
        background-position: 0 -90px;
      }
      .icon-find-5 {
        background-position: 0 -120px;
      }
      .icon-find-6 {
        background-position: 0 -150px;
      }
      .icon-find-7 {
        background-position: 0 -180px;
      }
      .icon-me {
        background: url(icon-me.png) no-repeat;
        background-size: 28px 120px;
      }
      .icon-me-2 {
        background-position: 0 -30px;
      }
      .icon-me-3 {
        background-position: 0 -60px;
      }
      .icon-me-4 {
        background-position: 0 -90px;
      }
      .wechat-list {
        display: block;
        height: 64px;
        padding: 8px 12px;
        box-sizing: border-box;
        border-bottom: 1px solid #d7d7d7;
        background-color: #fff;
      }
      .wechat-list:last-child {
        border-bottom: 0;
      }
      .wechat-list>img {
        width: 48px;
        height: 48px;
        float: left;
      }
      .wechat-list>.cell {
        padding-left: 58px;
        line-height: 24px;
        color: #333;
      }
      .wechat-h-time {
        overflow: hidden;
      }
      .wechat-h-time>h5 {
        font-size: 100%;
        float: left;
      }
      .wechat-h-time>time {
        font-size: 12px;
        color: #b9b9b9;
        float: right;
      }
      .wechat-h-time .business {
        color: #54688D;
      }
      .wechat-h-time+p {
        margin: 0 20px 0 0;
        font-size: 14px;
        color: #a8a8a8;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .wechat-detail {
        position: relative;
        z-index: 1;
      }
    }
    </style>
  </head>

  <body>
    <div class="page">
      <div class="header">
        <h1>慕课网</h1>
        <a href="javascript:" class="icon-add">添加</a>
        <a href="javascript:" class="icon-search">搜索</a>
      </div>
      <div class="content">
        <div class="">
          <a href="http://www.imooc.com/learn/192" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>早上09:51</time></div>
              <p>CSS深入理解值绝对定位</p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/192" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>早上09:38</time></div>
              <p>如果高度不够，可以手动缩小浏览器高度</p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/192" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>早上08:47</time></div>
              <p>此demo是本系列最后一个demo</p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/192" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>早上08:36</time></div>
              <p>此demo需要在高级浏览器中查看</p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/192" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>昨天</time></div>
              <p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
            </div>
          </a>
          <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>昨天</time></div>
              <p>最近鄙人整了个名叫Mobilebone的开源项目</p>
            </div>
          </a>
          <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>星期三</time></div>
              <p>就是依赖绝对定位整体布局，大家可以前去围观</p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/192" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5 class="business">慕课网</h5><time>星期三</time></div>
              <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/121" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>星期三</time></div>
              <p>CSS深入理解之浮动</p>
            </div>
          </a>
          <a href="http://www.imooc.com/learn/121" class="wechat-list">
            <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
            <div class="cell">
              <div class="wechat-h-time">
                <h5>张鑫旭</h5><time>上周</time></div>
              <p>同样精彩，欢迎支持~</p>
            </div>
          </a>
        </div>
      </div>

      <div class="footer">
        <a href="http://www.imooc.com/course/list">
          <i class="icon-wechat"></i>课程
        </a>
        <a href="http://www.imooc.com/wenda">
          <i class="icon-contacts"></i>问答
        </a>
        <a href="http://www.imooc.com/seek/index">
          <i class="icon-finds"></i>求课
        </a>
        <a href="http://www.imooc.com/space/course" class="active">
          <i class="icon-mes"></i>我的课程
        </a>
      </div>
    </div>
  </body>
</html>

原文地址：https://www.cnblogs.com/fengxiongZz/p/8151070.html

时间： 2024-11-02 23:41:43

CSS深入理解之absolute（HTML/CSS）的相关文章

css深入理解之absolute

一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>absolute和float

[ css 深入理解 vertical-align line-height 属性 ] css中深入理解vertical-align和line-height的基友关系及实例演示的区别

一.想死你们了几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦,突然想起来,我就是住在上海郊外的小乡镇上. 刚刚买了几十股京东的股票,第一次玩这个,看好京东的发展.其实股价21的时候就打算入手了,但是,转外汇的时候,提示,要工作时间.然后一忙二忘,等现在入的时候,已经涨了20%多了,科科,肥皂弄人啊!写到这里的时候,忍不住拿出手机一看,哎呦,不错哦,盈利28刀

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位在用CSS+DIV进行布局定位的时候,一

CSS深入理解之line-height

以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离. 定义三问: 什么是基线? 为何是基线? 需要两行? 如图红色线即为基线基线乃*线定义之根本! 基线的扩展知识,稍作了解.如图: 第3个问题,一行文字难道就没有行高吗?非也,一行文字也是有行高的,两行的定义已经决定了一行的表现! 所以,行高表现为,如下图:(如果试想行高为0,那么两行文字将重合) 问题:为何line-height可以让单行文本垂直居中?

CSS初步理解

最近在学习牛腩的时候遇到了网页的制作,挺新鲜的.当中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间,找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下链接. CSS基础知识以下是对CSS理解的导图通过上图我们也发现,CSS也很难,也容易.容易是说,学起来很快就可以上手,这中语言简单易懂,只要你具备小学英语的知识量就可以了.困难是在指学好它并不容易,因为它需要你耐心.就好比我们对word文档的排版,哪里需要主体鲜明一点,哪里需要着重突出一下,哪

响应式设计：理解设备像素，CSS像素和屏幕分辨率

概述屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计在响应式设计中,使用了viewport,device-width,media

CSS自学笔记（7）:CSS定位

很多时候,我们需要对一些元素进行自定义排序.布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序.布局等操作,可以改变浏览器默认的死板的排序. CSS定位的功能很容易理解,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. CSS的定位(position)属性有四种不同的定位类型,从而影响元素框的声称方式. CSS 内边距属性属性描述备注 static 元素框正常生成块级元素生成一个矩形框,作为文档流的一部分.

CSS基础学习十八：CSS布局之浮动

CSS布局中说到定位就不得不提浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 一float属性的定义和用法 float属性:设置元素浮动可能的值: none 不浮动,在文档流内,默认 left 左浮动,脱离文档流 right 右浮动,脱离文档流 inherit 规定应该从父元素继承 float属性的值. float属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文

CSS自学笔记（3）:CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="