<!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; }
