w3c和mdn文档都有解释,我就直接写demo吧哈哈!
1.position:relative的left和top结合使用
body {
margin: 0;
padding: 0;
}.app {
position: relative;
width: 100px;
height: 100px;
left: 100px;
top: 100px;
background: #3a9;
}
效果:
文章图片
image.png
相对于左上角
2.position:relative的right和bottom结合使用
body {
margin: 0;
padding: 0;
}.app2 {
position: relative;
width: 100px;
height: 100px;
right: 50px;
bottom: 50px;
background: #f00;
}
效果:
文章图片
image.png
你会发现向左向上移动了,这是因为
【position小结】position:relative的时候这些div块都是相对于自身移动的,是left,top的时候以向下向右为正坐标轴,当是right,bottom的时候,以向上向左为正坐标轴,
3..position:absolute的left和top结合使用
body {
margin: 0;
padding: 0;
}
.app {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
top: 100px;
background: #3a9;
}
效果:
文章图片
image.png
相对于左上角
4..position:absolute的right和bottom结合使用
body {
margin: 0;
padding: 0;
}.app {
position: absolute;
width: 100px;
height: 100px;
right: 100px;
bottom: 100px;
background: #3a9;
}
效果:
文章图片
image.png
相对于右下角
body {
margin: 0;
padding: 0;
height: 1500px;
background: #3a3;
}.app {
position: absolute;
width: 100px;
height: 100px;
right: 100px;
bottom: 100px;
/* right bottom相对于视口 */
background: rgb(223, 21, 65);
}
6
body {
margin: 0;
padding: 0;
height: 1500px;
background: #3a3;
}.app {
position: absolute;
width: 100px;
height: 100px;
right: 100px;
bottom: -400px;
/* -400px是相对于视口向下400px */
/* right bottom相对于视口 */
background: rgb(223, 21, 65);
}
5 和6的demo都是相对于右下角,但是从5这个demo中能知道position:absolute的时候是相对于7视窗可见位置的偏移,而不是整个body中,因为body宽1500px,从这可以看出来的.从6这个demo可以看出是以向上向左为正半轴的.
body {
margin: 0;
padding: 0;
}
/*
app不设置position时,等同于static,此时的子元素不是相对于父元素定位的,而是相对于窗口;
当position不是static的时候,是相对于父元素;
*/
.app {
width: 300px;
height: 300px;
background: #3a3;
margin-left: 200px;
margin-top: 200px;
}
.app-child {
position: absolute;
width: 100px;
height: 100px;
left: 0;
top: 0;
background: rgb(223, 21, 65);
}
效果图:
文章图片
image.png
app不设置position时,等同于static,此时的子元素不是相对于父元素定位的,而是相对于窗口;
当position不是static的时候,是相对于父元素
