我的定位：中高级人才（框架熟练、Java语法精通、数据库会用、Linux会用、中间件会用、有大数据经验！）
开始，我以为自己什么都知道。后来发现，其实我什么都不知道。

css10定位属性 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定位属性</title>
    <style type="text/css">
        /*
           position
          01.relative:相对定位，相对于自身原来的位置
          02.absolute：绝对定位，相当于父级
          03.fixed : 固定定位    相对于浏览器
          04.static ：默认值
        */
    img{
        position: fixed;  /*固定定位*/
        left: 50px;
        top: 20px;
    }
   #a{
       position: absolute; /*绝对定位*/
       top: 20px;
       height: 50px;
       width: 50px;
       background-color: blue;
   }
   #b{
       height: 50px;
       width: 50px;
       background-color: deeppink;
   }
   #c{
       position: relative; /*相对定位*/
       height: 50px;
       width: 50px;
       background-color: green;
   }
    </style>
</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  <img src="image/cat.jpg"  width="50px" height="50px">
</body>
</html>

运行效果图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style  type="text/css">
         div{
             margin: 10px;
             padding: 5px;
             font-size: 12px;
             line-height: 25px;
         }
/*
position属性：
  static：默认值，没有定位！
  relative:相对定位！ 相对于自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
            设置相对定位的盒子，原本的位置会被留下来！
*/
        #father{
            border: 1px solid  red;
        }
        #first{
            border: 1px dashed  orange;
            background-color:orange ;
            position: relative;
            /*top: 20px;
            left: 20px;*/
        }
        #second{
            border: 1px dashed  pink;
            background-color:pink ;
            position: relative;
            float: right;
        }
        #third{
            border: 1px dashed  yellowgreen;
            background-color:yellowgreen ;
            position: relative;
        }
    </style>
</head>
<body>
  <div id="father">
       <div id="first">第1个盒子</div>
       <div id="second">第2个盒子</div>
       <div id="third">第3个盒子</div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>花样连接</title>
    <style type="text/css">
         div{
             width: 300px;
             height: 300px;
             border: 1px solid red;
             padding: 10px;
         }
        a{
            display: block;
            height: 80px;
            width: 80px;
            background-color:pink ;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
        }
        #a2,#a4{
            position: relative;
            left:180px;
            top: -80px;
        }
        #a5{
            position: relative;
            left:90px ;
            top: -240px;
        }
        a:hover{
            background: blue;
            text-decoration: underline;
            color: deeppink;
        }

    </style>
</head>
<body>
<div id="box">
    <a href="#" id="a1">链接1</a>
    <a href="#" id="a2">链接2</a>
    <a href="#" id="a3">链接3</a>
    <a href="#" id="a4">链接4</a>
    <a href="#" id="a5">链接5</a>
</div>
</body>
</html>
/*
position属性：
  static：默认值，没有定位！
  relative:相对定位！ 相对于自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
            设置相对定位的盒子，原本的位置会被留下来！
  absolute:绝对定位：相对于离当前元素最近的一个已经定位的父级元素为基准！
            如果父级元素没有设置定位属性，则以浏览器为准！
            元素的位置发生变化之后，脱离了标准的文档流！它原来的位置不会保留！
  fixed: 固定定位！ 相对于浏览器的！
  z-index: 设置层叠！ 数值越大，离我们越近！  对于没有设置position属性的元素无效！
*/

 

posted @ 2017-06-29 14:11  想太多先森  阅读(286)  评论(0)  编辑  收藏  举报