定位

定位： position
1.static 默认值 没有定位
2.relative 相对定位，参照物是自身原来的位置
01. 参照物是自身原来的位置
02. 不会脱离标准文档流，对父级盒子和相邻的盒子不会产生影响
03. 自身之前的位置会保留

3.absolute 绝对定位，参照物是当前盒子的父级
01.参照物是当前盒子的父级
02.父级必须是设置了定位（一般父级都是相对定位）
03.如果找不到祖先元素，以浏览器为参照物
04.会脱离标准文档流，
如果相邻的盒子没有设置定位属性，会产生影响，
如果相邻的盒子设置定位属性，不会产生影响，
05.自身之前的位置不会保留

4.fixed 固定定位，参照物是浏览器

顺序离我们最近的是
fixed > relative > absolute > static

 

z-index:

设置相同层面的元素 堆叠顺序 默认值 是0 值越大 离我们越近

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定位属性</title>
    <!--
      position
      01.static ：默认，没有定位！  离我们最远
      02.absolute：绝对定位
             001.脱离了标准文档流
             002.位置发生变化之后，位置不会被保留!后续元素会顶替之前的位置
             003.参照离这个设置了定位属性的最近的父级元素！如果没有  就以浏览器为准
     03.relative：相对定位
             001.相对于自身原来的位置
             002.没有脱离标准文档流
             003.位置发生变化之后，位置会被保留
     04.fixed：固定定位
              相对于浏览器
    -->

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

         div{
             height: 50px;
             width: 50px;
         }
         #box{  /*大盒子*/
             height: 300px;
             width: 300px;
             border: 2px solid red;
         }



       #box  div:nth-of-type(1){
            background: red;
           /*绝对定位*/
           position: absolute;
           left: 20px;  /* 距离父级元素 左边20px*/
        }

         #box  div:nth-of-type(2){
            background: orange;
             position:static ;/*默认值*/
        }

         #box  div:nth-of-type(3){
            background: pink;
             /*相对定位*/
             position: relative;
             bottom:20px;
        }



        #box  div:nth-of-type(4){
            background: red;
            /*固定定位*/
            position: fixed;
            left: 30px;
            top: 30px;
        }

        #box  div:nth-of-type(5){  /*如果两个盒子设置的定位属性相同，默认按照html结构元素顺序 后面会覆盖前面*/
            background: greenyellow;
            /*固定定位
            position: fixed;
            left: 30px;
            top: 30px;*/
        }

        /*层级关系
        固定定位   > 相对定位   >   绝对定位   >    默认static
        */

    </style>

</head>
<body>
<div  id="box">
    <div>第1个盒子</div>
    <div>第2个盒子</div>
    <div>第3个盒子</div>
    <div>第4个盒子</div>
    <div>第5个盒子</div>
</div>
</body>
</html>
定位属性
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>z-index属性</title>

    <style type="text/css">
       *{
           margin: 0px;
           padding: 0px;
       }
        li{
            list-style: none;
        }
       #content{
            width: 350px;
            height: 300px;
            border: 1px solid red;
            margin: 0px auto;
        }

        .tipBg{  /*带背景的*/
            background: gray;  /*可以使用  rgba*/
            opacity: 0.5;
            filter: alpha(opacity=50);/*解决低版本IE兼容性*/
        }
       .tipBg,.tipText{  /*都需要跑到 图片上去*/
           position: absolute; /* 都是绝对定位*/
           height: 25px;
           line-height: 25px;
           width: 331px; ;
           top: 102px;
       }

       .tipText{
           z-index:1;/*设置相同层面的元素  堆叠顺序   默认值 是0   值越大  离我们越近*/
           text-align: center;
       }
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../images/maple.jpg"  alt="香山红叶" /></li>
        <li class="tipText">京秋魅力&#8226;相约共赏香山红叶</li>
        <li class="tipBg"></li>
        <li>时间：11月16日 星期六 8:30</li>
        <li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
    </ul>
</div>
</body>
</html>
z-index属性

 

posted on 2017-11-02 17:29  我可不是隔壁的老王  阅读(152)  评论(0)  编辑  收藏  举报