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