body中代码如下
<body>
<div id="box-1" class="box"></div>
<div class="container">
<div id="box-2" class="box"></div>
<div id="box-3" class="box"></div>
</div>
<div id="box-4" class="box"></div>
<div id="box-5" class="box"></div>
</body>
- static
#box-5 {
/* 1.static默认定位方式 **/
position: static;
background: orange;
}
- sticky
#box-5 {
/** 2.sticky定位,一直停留在top为0的位置 **/
/* position: sticky;*/
/* top: 0;*/
background: orange;
}
- relative
#box-1 {
/* 3.relative相对定位,相对于父级定位(body)**/
position: relative;
top: 50px;
left: 50px;
background: red;
}
- absolute
.container {
position: relative; /**使用相对定位**/
width: 500px;
height: 500px;
background:#333 ;
z-index: 2;
}
#box-2 {
/** 4.absolute绝对定位 首先父级要有relative,然后相对于父级的容器进行定位。**/
position: absolute;
top: 100px;
left: 100px;
background: yellow;
}
#box-3 {
/* absolute绝对定位,绝对于父级(container)进行定位。*/
position: absolute;
bottom: 100px;
right: 100px;
background: green;
}
- fixed
#box-4 {
/*5.fixed固定定位,在页面中一直停留于某一个位置**/
position: fixed;
background: blue;
}