代码和效果图
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
#app{
width: 200px;
height: 200px;
background-color: #26dc8a;
}/*id权重更高 */
.box{
width: 50px;
height: 50px;
background-color: #11110d;
}
</style>
</head>
<body>
<div id="app" class="app">
<div class="box"></div>
</div>
</body>
</html>
效果图
- 现在我们要实现如下效果：
分析：要实现上述效果我们就要用到定位了，首先要给box容器添加一个绝对定位，并设置right和bottom为0，注意，还要为app容器添加一个相对定位，因为如果不添加的话box容器就会以父容器body为榜样了，就无法实现上图在app容器的右下方了，再设置app容器left为100px，app容器以自身页面为榜样。
变化的代码：
<style>
#app{
width: 200px;
height: 200px;
background-color: #26dc8a;
/*相对定位,设置后，才可以作为box的参考系，若没加，box则以body为参考系*/
position: relative;
left: 100px;
}/*id权重更高 */
.box{
width: 50px;
height: 50px;
background-color: #11110d;
/*绝对定位,一个容器只有设置了一个定位后，才可使用top,bottom...*/
position: absolute;
right: 0;
bottom: 0;
}
</style>
- 还可以不用给box容器添加绝对定位，通过给box容器添加一个相对定位，并设置bottom和right为150px也可以实现相同的效果。
变化的代码：
.box{
width: 50px;
height: 50px;
background-color: #11110d;
/*绝对定位,一个容器只有设置了一个定位后，才可使用top,bottom...*/
position: relative;
left: 150px;
top: 150px;
}
- 实现效果图：
分析：想要实现上面的效果图只需要给box容器添加一个固定定位，并设置bottom为0；
变化的代码：
.box{
width: 50px;
height: 50px;
background-color: #11110d;
/*绝对定位,一个容器只有设置了一个定位后，才可使用top,bottom...*/
position: fixed;
/* 固定定位，相对于屏幕 */
right: 0;
}
总结
- position: absolute; 绝对定位，它需要找榜样(会相互对于榜样来定位自己)；
- position: relative; 相对定位，可以作为别人的榜样，也相对于自己本身的页面位置来定位；
- position: fixed; 固定定位，相对于浏览器的屏幕来定位自己；
