3st 关于position四定位 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position定位应用</title>
    <link rel="stylesheet" type="text/css" href="3st 2.css" />
</head>
<body>
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>

</body>
</html>
.box {
  display: inline-block;/*值为行内块元素*/
  width: 100px;
  height: 100px;
  background: red;/*背景板颜色*/
  color: black;/*--1234的颜色*/
}

#one{
    position: static;/*元素框正常生成*/
    width: 100px;
    height: 50px;
    background: yellow;/*重定义*/
}

#two {/*相对定位*/
  position: relative;/*元素框偏移某个距离*/
  top: 20px;/*定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移*/
  left: 20px;/*左边界*/
  background: blue;
}

#three{/*绝对定位*/
    position: absolute;/*忽略原本定位框重新进行定位*/
    top:20px;
    left:20px;
    background: grey;
}
/*固定定位  区别在于滚动条出现时*/
#four{
    position: fixed；
    top:20px;
    left:20px;
    background: pink;
}

posted @ 2018-09-28 02:42  共挽鹿车  阅读(155)  评论(0)    收藏  举报