CSS第六部分 8.2

一、相对定位
1.相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;

元素相对****自己原来的位置****，进行位置调整。
position:relative;→ 必须先声明，自己要相对定位了，
left:100px;→ 然后进行调整。
top:150px;→ 然后进行调整。
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
负数就是相反方向。
3.相对定位的特点：不脱标，老家留坑，形影分离
相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。
4.用途：
1）微调元素
2）做绝对定位的参考，子绝父相（讲绝对定位的时候说）
二、绝对定位
1.绝对定位脱标，是脱离标准文档流的。******
不会留坑，相对于整个页面的左上角进行移动，
2.脱标之后行内元素可以设置宽高
3.如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角**
如果用****bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角

4.一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点
●要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
如果父亲也爷爷都有相对定位，听父亲的，如果父亲没有爷爷有，那么听爷爷的。
● 不一定是相对定位，任何定位，都可以作为参考点
父亲儿子都是绝对定位儿子也可以以父亲为参考的
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。
● 绝对定位的儿子，无视参考的那个盒子的padding。
盒子中有padding 不管！

5.绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效，可以使用 left:50%;margin-left:-一半真实宽度。

三、固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。脱离标准文档流。永远不会跑。
IE6不兼容
四、z-index
1.没有单位，是一个正整数，默认是0。

z-index值表示谁压着谁。数值大的压盖住数值小的。
3.只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
4 如果大家都没有z-index值，或者z-index值一样，谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
5.从父现象：父亲怂了，儿子再牛逼也没用。
就是看父亲的！！！

贴下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>博雅互动-0802开始-zjx</title>
   <style type="text/css">
        *{
           margin: 0;
           padding: 0;
        }
        body{
           font-family: "微软雅黑" ;
        }
        .cl{
           clear: both;/*隔墙 清除浮动*/
        }
        .header{
           height: 58px;
           background-color: #191D3A;
        }
        .inner{
/*            float: left;*//*同样不用加*/
           width: 1000px;
           margin: 0 auto;
        }
        .header .inner h3 img{
           float: left;
           margin-right: 36px;
        }
        .header  .nav {
           float: left;
        }
        .header  .nav ul {
           list-style: none;
           text-align: center;
        }
         .header .nav ul li{
           float: left; 
           width: 100px;
           line-height: 58px;
           border-left:solid 2px #252947; 
        }
         .header .nav ul li a{
          /* float: left;*//*不能加的！！！！*/
           color: #818496;
           display: block;/*划重点！！这里很重要 容易忘*/
           text-decoration: none;
        }
         .header .nav ul li a.now{ /*是给超链接文字设置样式 so要在a下*/
           color: white;
           background-color: #252947;
        }
         .header .nav ul li.last{
           border-right:solid 2px #252947;
        }
         .header .nav ul li a:hover{
           color: white;
           background-color: #252947;
        }
        .header .jrwm_box{
           float: left;
           padding-top:10px;
           padding-left: 48px;
        }
        .header .jrwm_box a{
           display: block;
           width: 100px;
           height: 34px;
           background-color: #38B774;
           border-radius: 4px;
           text-decoration: none;
           text-align: center;
           color: white;
           line-height: 34px;
        }
        .header .jrwm_box a:hover{
           background-color: #48C784;
        }
        .banner{
           position: relative;
           height: 465px;
           background: url(images/banner.jpg) no-repeat center top;
        }
        .banner .circles{
           position: absolute;
           width: 120px;
           height: 16px;
           bottom: 18px;
           left: 50%;
           margin-left:-60px; 
        }
        .banner .circles ol{
           padding-top: 3px;
           list-style: none;
        }
        .banner .circles ol li{
           width: 12px;
           height: 12px;
           float: left;
           _font-size:0;
           padding-right: 15px;
           cursor: pointer;/*让鼠标变为小手的形状*/
           background: url(images/dian1.png) no-repeat;
        }
        .banner .circles ol li.last{/*不能加空格*/
           padding-right: 0;
        }
        .banner .circles ol li.now{
           background: url(images/dian2.png) no-repeat;
        }  
        .content{
           padding-top: 50px;
        }
        .content .product{
           position: relative;
           height: 229px;
           border-bottom: 2px solid #DBE1E7; 
        }
        .content .product ul li{
           float: left;
           margin-right: 43px;
           list-style: none;
           text-align: center;
           line-height: 40px;
           color: #444895; 
        }
        .content .product ul li.last{
           margin-right: 0px;
        }
        .content .product ul li img{
           width: 218px;
           height: 130px;
        }
        .content .product ul li.last img{
           width: 217px;
           height: 130px;
        }
        .content .product ul li h3{
           text-decoration: none;
           font-size:14px;
        }
        .content .product ul li p.djbf{
           text-align: center;
         }
         .content .product ul li p.djbf a{
           text-decoration: none;
           color: #38B774;
           font-size: 12px;
           background: url(images/sj.png) no-repeat right center;
           padding-right: 16px;
         }
         .content .product .circles{
           position: absolute;
           width: 116px;
           height: 16px;
           left: 50%;
           margin-left:-58px; 
           background-color:white; 
           bottom: -10px;
         }
         .content .product .circles ol{
           list-style: none;
           padding-left:14px; 
         }
         .content .product .circles ol li{
           width: 12px;
           height: 12px;
           float: left;
           padding-right: 12px;
           background: url(images/dian1.png) no-repeat;
           cursor: pointer;
         }
         .content .product .circles ol li.now{
           background: url(images/dian2.png) no-repeat;
         }
         .content .product .circles ol li .last{
           padding-right: 0;
         }
         .content .boya{
           padding-top:54px;
         }
         .content .boya .boyanews{
           position: relative;/*（为了子绝父相*/
           float: left;
           background: url(images/bynewsbg.jpg) no-repeat;
           width: 500px;
           height: 314px;
         }
         .content .boya .boyajobs{
           position: relative;
           float: left;
           background: url(images/byhrbg3.jpg) no-repeat;
           width: 500px;
           height: 314px;/*忘记加高度了，不显示，父亲没有给高度，父亲可以被内容撑起来，儿子必须加高度呀！*/
         }
         .content .boya .boyanews ul{
           list-style:none;
           padding: 0 20px;
           margin-top: 106px
         }
         .content .boya .boyanews ul li{
           line-height: 50px;
           border-bottom: 1px solid #DBE1E7;
           font-size: 12px;
         }
         .content .boya .boyanews ul span{
           color:#AFBECF;
           margin-right: 20px;
         }
         .content .boya .boyanews ul li a{
           text-decoration: none;
           color:#444866;
           font-size: 14px;
         }
         .content .boya .boyanews .more{
           position: absolute;
           width: 77px;
           height: 34px;
           top:35px;
           left: 204px;
           text-indent: -999px;
           background: url(images/more.png) no-repeat ;
         }
         .content .boya .boyanews ul li a:hover{
           color: orange;          }
         .content .boya .boyajobs .title{
           text-indent: -9999px;
           padding-top:37px;
           padding-left: 73px; 
         }
         .content .boya .boyajobs .title h3{
           background: url(images/a.png) no-repeat;
           width: 124px;
           height: 56px;
         }
         .content .boya .boyajobs h1{
           color: white;
           font-size: 14px;
           padding-left: 20px;
           padding-top: 18px;
         }
         .content .boya .boyajobs ul{
           list-style: none;
           padding-left: 20px;
           padding-right: 175px;
         }
         .content .boya .boyajobs ul li{
           line-height: 37px;
           border-bottom: 1px solid #6FDEA3;
         }
         .content .boya .boyajobs ul li a{
           text-decoration: none;
           color: white;
           font-size: 14px;
         }
         .content .boya .boyajobs .more{
           position: absolute;
           text-indent: -999px;
           background: url(images/more1.png) no-repeat;
           width: 77px;
           height: 34px;
           top: 42px;
           left: 199px;
         }
         .footer{
           height: 91px;
           background-color: #191D3A;
           margin-top: 54px;
         }
         .footer .inner .left {
           float: left;
           width: 400px;
           height: 92px;
         }
         .footer .inner .left span{
           text-decoration: none;
           color: gray;
         }
         .footer .inner .left a{
           text-decoration: none;
           color: gray;
           font-size: 12px;
           line-height: 91px;
         }
         .footer .inner .right{
           float: left;
           width: 600px;
           height: 91px;
           text-align: center;
         }
         .footer .inner .right a{
           text-decoration: none;
           color: gray;
           font-size: 12px;
           line-height: 91px;

         }
         .footer .inner .right img{
           position: relative;
           top: 20px;
           width: 40px;
           left: 128px;
         }
   </style>
</head>
<body>
   <div class="header">
       <div class="inner">
       <h3>![](images/logo.png)</h3>
           <div class="nav">
               <ul>
                   <li><a href="" class="now">首页</a></li><!--  a标签放里面！！！！敲脑袋 -->
                   <li><a href="">博雅游戏</a></li>
                   <li><a href="">博雅新闻</a></li>
                   <li><a href="">关于我们</a></li>
                   <li><a href="">客服中心</a></li>
                   <li class="last"><a href="">投资者关系</a></li>
               </ul>
           </div>
           <div class="jrwm_box">
               <a href="#" class="jrwm">加入我们</a>
               <!-- ![](images/jrwm.png) -->
           </div>
       </div>
   </div>
   <div class="cl"></div>
   <div class="banner">
      <div class="circles">
          <ol>
              <li class="now"></li>
              <li></li>
              <li></li>
              <li class="last"></li>
          </ol>
      </div>      
   </div>
   <div class="content">
     <div class="inner"> <!-- （版心） 现在都用这种布局方式 让中间内容居中-->
       <div class="product">
           <ul>
               <li>
                   <p>
                       ![](images/bpt.jpg)
                   </p>
                   <h3>BPT宣传片</h3>
                   <p class="djbf"><a href="">点击播放</a></p>
               </li>
               <li>
                   <p>
                       ![](images/video.jpg)
                   </p>
                   <h3>博雅互动宣传视频</h3>
                   <p class="djbf"><a href="">点击播放</a></p>
               </li>
               <li>
                   <p>
                       ![](images/gamepic3.jpg)
                   </p>
                   <h3>斗地主</h3>
                   <p class="djbf"><a href="">点击播放</a></p>
               </li>
               <li class="last">
                   <p>
                       ![](images/gamepic1.jpg)
                   </p>
                   <h3>德州扑克</h3>
                   <p class="djbf"><a href="">点击播放</a></p>
               </li>
           </ul>
          <div class="circles">
          <ol>
              <li class="now"></li>
              <li></li>
              <li></li>
              <li class="last"></li>
          </ol>
      </div> 
       </div>
       <div class="boya">
          <div class="boyanews">
            <ul>
                <li>
                <span>09 / 28</span>
                <a href="#" alt="">2015博雅国际博客大赛（BPT）在澳门落幕</a></li>
                <li> 
                <span>09 / 28</span>
                <a href="#" alt="">2015博雅国际博客大赛（BPT）在澳门落幕</a></li>
                <li>
                <span>09 / 28</span>
                <a href="#" alt="">2015博雅国际博客大赛（BPT）在澳门落幕</a></li>
                <li>
                <span>09 / 28</span>
                <a href="#" alt="">2015博雅国际博客大赛（BPT）在澳门落幕</a></li>
            </ul>
            <a href=""class="more">more</a>
           </div>
          <div class="boyajobs">
              <div class="title">
                   <h3>专场招聘</h3>
              </div>
              <h1>专场招聘岗位:</h1>
              <div class="list">
                  <ul>
                       <li><a href="#">PHP开发工程师</a></li>
                       <li><a href="#">C++开发工程师</a></li>
                       <li><a href="#">WEB前端开发工程师</a></li>
                       <li><a href="#">大数据开发工程师</a></li>
                  </ul>
                  <a href="" class="more">more</a>
              </div>
          </div>    
       </div>
     </div>
   </div>
   <div class="cl"></div>
   <div class="footer">
       <div class="inner">
           <div class="left">
               <a href="">网站地图</a>
               <span>|</span>
               <a href="">免费声明</a>
           </div>
           <div class="right">
               <a href=""> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈终于写完了。。。</a>
               ![](images/govIcon.gif)
           </div>
       </div>
   </div>
</body>
</html>

ps：中间遇到的问题都在注释里，过两天再看一遍，之后总结一下心得

最后编辑于：2017.12.09 22:59:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,194评论 6赞 490
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,058评论 2赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 156,780评论 0赞 346
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,388评论 1赞 283
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,430评论 5赞 384
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,764评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,907评论 3赞 406
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,679评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,122评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,459评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,605评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,270评论 4赞 329
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,867评论 3赞 312
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,734评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,961评论 1赞 265
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,297评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,472评论 2赞 348

CSS第六部分 8.2

推荐阅读更多精彩内容