第十八章 定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>定位</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      /*div{
        width: 100px;
        height: 100px;
      }
      .box1{
        background-color: red;
      }
      .box2{
        background-color: green;

        position: relative;
        top: 10px;
        left: 20px;

        margin-top: 20px;
        margin-bottom: 20px;
      }
      .box3{
        background-color: blue;
      }
      span{
        position: relative;

        width: 100px;
        height: 100px;
        background-color: red;
      }*/

      /*input{
        width: 150px;
        height: 50px;
      }
      img{
        width: 150px;
        height: 50px;
        position: relative;
        top: 20px;
      }*/

      /*div{
        width: 100px;
        height: 100px;
      }
      .box1{
        background-color: red;
      }
      .box2{
        background-color: green;

        position: absolute;
        top: 0px;
        right: 0px;
      }
      .box3{
        background-color: blue;
      }
      span{
        position: absolute;

        width: 100px;
        height: 100px;
        background-color: red;
      }*/

      /*.box1{
        width: 300px;
        height: 300px;
        background-color: red;

        position: absolute;
        position: relative;
        position: fixed;
        position: static;
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: blue;

        position: absolute;
        position: relative;
        position: fixed;
      }
      .box3{
        width: 100px;
        height: 100px;
        background-color: green;

        position: absolute;
        bottom: 0;
      }*/

    /*.box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .box2{
      width: 2000px;
      height: 100px;
      background-color: blue;
    }
    .box3{
      width: 100px;
      height: 2000px;
      background-color: green;
    }*/

    /*.box{
      width: 300px;
      height: 300px;
      background-color: red;
      border: 5px solid;
      box-sizing: border-box;
      padding-left: 30px;
      padding-top: 20px;
      position: absolute;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      left: 0px;
      top: 0px;
    }*/

    /*ul{
      width: 800px;
      height: 50px;
      background-color: #CCC;
      margin: 0 auto;
      list-style: none;
      margin-top: 100px;
    }
    ul li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      float: left;
    }
    ul li:nth-of-type(4){
      background-color: yellow;
      position: relative;
    }
    ul li img{
      width: 15px;
      height: 15px;
      position: absolute;
      left: 40px;
      top: -10px;
      left: 50%;
      margin-left: -7.5px;
    }*/

    /*div{
      width: 300px;
      height: 300px;
      border: 2px solid #ccc;
      margin: 0 auto;
      margin-top: 100px;
      position: relative;
    }
    div .image01{
      width: 300px;
      height: 200px;
    }
    div .image02{
      width: 45px;
      height: 44px;
      position: absolute;
      left: 0;
      top: 0;
    }
    div .image03{
      width: 134px;
      height: 42px;
      position: absolute;
      left: -7px;
      top: 163px;
    }*/

    /*div{
      width: 520px;
      height: 280px;
      border: 2px solid gold;
      margin: 0 auto;
      margin-top: 100px;
      position: relative;
    }
    div img{
      width: 520px;
      height: 280px;
    }
    div span{
      width: 40px;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 80px;
      text-align: center;
      font-size: 24px;
      position: absolute;
    }
    div .leftArrow{
      left:0;
      top: 100px;
    }
    div .rightArrow{
      right:0;
      top: 100px;
    }
    ul {
      list-style: none;
      width: 200px;
      height: 40px;

      position: absolute;
      bottom: 10px;
      right: 10px;
    }
    ul li {
      width: 40px;
      line-height: 40px;
      float: left;
      text-align: center;
      border: 1px solid gold;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.5);
    }*/

    /*div{
      width: 100px;
      height: 100px;
    }
    .box1{
      background-color: red;
    }
    .box2{
      background-color: green;
      position: fixed;
    }
    .box3{
      background-color: blue;
    }
    .box4{
      height: 2000px;
      background-color: yellow;
    }*/

    /*.nav {
      width: 100%;
      height: 45px;
      background: url("../image/call.jpeg") no-repeat center top;
      background-color: red;
      position: fixed;
    }
    .content{
      width: 100%;
      height: 2000px;
      background-color: green;
    }
    div img:first-child{
      width: 100px;
      height: 80px;
      position: fixed;
      top: 200px;
      left: 0;
    }
    div img:last-child{
      width: 100px;
      height: 80px;
      position: fixed;
      top: 200px;
      right: 0;
    }
    a{
      width: 45px;
      line-height: 45px;
      text-align: center;
      position: fixed;
      bottom: 100px;
      right: 10px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.5);
    }*/

    /*.father1{
      width: 300px;
      height: 300px;
      background-color: red;
      position: absolute;
      left: 150px;
      z-index: 3;
    }
    .son1{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      left: 350px;
      top: 200px;
    }
    .father2{
      width: 300px;
      height: 300px;
      background-color: green;
      position: fixed;
      top: 150px;
      left: 150px;
      z-index: 2;
    }
    .son2{
      width: 100px;
      height: 100px;
      background-color: yellow;
      position: absolute;
      top: 100px;
      left: 350px;
    }
    .father3{
      width: 300px;
      height: 300px;
      background-color: brown;
    }
    .son3{
      width: 100px;
      height: 100px;
      background-color: pink;
    }*/
    </style>
  </head>
  <!-- <body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
    <span>I am span.</span> -->

    <!-- <input type="text" name="" value="">
    ![](../image/call.jpeg) -->

    <!-- <div class="box1">
      <div class="box2">
        <div class="box3">

        </div>
      </div>
    </div> -->

    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div> -->

    <!-- <div class="box">
      <div class="box1">

      </div>
    </div> -->

    <!-- <ul>
      <li>服装城</li>
      <li>美妆店</li>
      <li>京东超市</li>
      <li>全球购
        ![](../image/call.jpeg)
      </li>
      <li>闪购</li>
      <li>团购</li>
      <li>拍卖</li>
      <li>金融</li>
    </ul> -->

    <!-- <div class="">
      ![](../image/o.gif)
      ![](../image/call.jpeg)
      ![](../image/call.jpeg)
      <p>哎呦呦，真好看，真好玩</p>
    </div> -->

    <!-- <div class="">
      ![](../image/o.gif)
      <span class="leftArrow">&lt</span>
      <span class="rightArrow">&gt</span>

      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>

    </div> -->



    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
    <div class="box4">

    </div> -->

    <!-- <div class="nav">

    </div>
    <div class="content">
      ![](../image/o.gif)
      ![](../image/o.gif)
    </div>
    <a href="#">返回</a> -->

    <!-- <div class="father1">
      <div class="son1">

      </div>
    </div>
    <div class="father2">
      <div class="son2">

      </div>
    </div>
    <div class="father3">
      <div class="son3">

      </div>
    </div> -->

  </body>
</html>

第146课 定位

1、定位流分类

1.1相对定位
1.2绝对定位
1.3固定定位
1.4静态定位

相对定位：相对于自己以前在标准流中的位置来移动

{
  position:relative;
  top:20px;
  //left right bottom
}

相对定位是不脱离标准流的，会继续在标准流中的占用一份空间

第147课 相对定位注意点

1、相对定位是不脱离标准流的，会继续在标准流中的占用一份空间
2、在相对定位中同一个方向上的定位属性只能使用一个
3、由于相对定位是不脱离标准流，所以在相对定位中是区分 块级元素／行内元素／行内块级元素

4、由于相对定位是不脱离标准流，并且相对于定位元素会占用标准流中的位置，
所以当给相对定位的元素设置margin／padding等属性时会影响标准流的布局
也就是margin／padding会在未发生相对定位的位置添加，
同时相对定位会在添加margin／padding后重新定位

相对定位应用场景

1、用于对元素进行微调
2、配合后面学习的绝对定位来使用

第148课 绝对定位

绝对定位：相对于body来定位

{
  position: absolute;
  top: 0px;
  right: 0px;
}

注意点：

1、绝对定位的元素是脱离标准流的
2、绝对定位的元素是不区分块级元素／行内块级元素／行内元素的，均可设置width、height

第149课 绝对定位参考点

规律

1、默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点
2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，
那么这个绝对定位就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指定的定位流包含：相对定位／绝对定位／固定定位，不包含静态定位
2.3就近元素作为参考点

第150课 绝对定位注意点

1、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页屏幕的宽高作为参考点，
而不是以整个网页的宽度和高度作为参考点
2、一个绝对定位的元素会忽略祖先元素的padding

第151课 绝对定位子绝父相

相对定位弊端：不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面
绝对定位弊端：默认情况下绝对定位的元素会以body作为参考点，
所以会随着浏览器屏幕的宽高的变化而变化

避免两者弊端，标签处添加小标

子绝父相：子元素用绝对定位，父元素用相对定位

第152课 绝对定位-水平居中

1、只需要设置绝对定位元素的left：50%；
2、设置绝对定位元素的margin-left：负的绝对定位元素的宽度的一半

第153课 定位练习-团购界面

0 = 0px 当值为0时，可以省略px
当一个元素盖在另一个元素上，一定要想到定位流，同时想到子绝父相
当用到精灵图时，选择作为背景图片

第154课 定位练习-焦点图

一个练习

第155课 定位流-固定定位

固定定位和背景关联方式很像，

背景定位可以让背景图片不随着滚动条的滚动而滚动,background-attachment: fixed;
而固定定位可以让某个盒子不随着滚动条的滚动而滚动,position:fixed;

注意点：

1、固定定位的元素是脱离标准流的，不会占用标准流中的空间
2、固定定位和绝对定位一样不区分行内元素／块级元素／行内块级元素

第156课 定位练习-新浪首页

图片堆积而成，没有图片使用自己图片代替

第157课 定位流-z-index 属性

1、IE浏览器不支持默认定位
2、一个元素默认情况下就是静态定位
3、z-index
默认情况下所有的元素都有一个默认的z-index属性，取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1、默认情况下定位流的元素会盖住标准流的元素
2、默认情况下定位流的元素后面编写的会盖住前面编写的
3、如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面

注意点
从父现象

1、如果两个元素的父元素都没有设置z-index属性，
那么谁的z-index属性比较大谁就显示在上面
2、如果两个元素的父元素设置了z-index属性，谁的父元素的z-index属性比较大谁就显示在上面

内容参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,302评论 1赞 92
  • CSS 定位（postion、z-index）
    CSS 定位 CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute, fixed)：普通流是默认定...
    _空空阅读 6,022评论 0赞 15
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 137,024评论 19赞 139
  • 除了氧传感器 你还应该知道汽车内有这些传感器
    在现代社会，传感器的应用已经渗透到人类的生活中。传感器是一种常见的装置，主要起到转换信息形式的作用，大多把其他形式...
    happysandy阅读 501评论 0赞 3
  • Mac OS X Sierra系统重装
    电脑桌面上杂乱的文件太多了，看得我头疼，之前都是安装双系统，也从来没有像重装windows系统一样，重新安装过Ma...
    小唐羽锋阅读 5,422评论 2赞 50

友情链接更多精彩内容