- 布局叠加
- 完整代码
- 最外层的Container设置为relative，内部的几个box设置为absolute
<template><div class="container"><div class="box box1">Box 1</div><div class="box box2">Box 2</div><div class="box box3">Box 3</div></div>
</template><script>
export default {
};
</script><style scoped>
.container {position: relative;width: 300px;height: 300px;background: #888888;
}.box {position: absolute;width: 100px;height: 100px;text-align: center;line-height: 100px;
}.box1 {background-color: red;top: 50px;left: 50px;
}.box2 {background-color: blue;top: 100px;left: 100px;
}.box3 {background-color: green;top: 150px;left: 150px;
}
</style>
- 如果Container不设置relative则，内部的box则会相对整个页面进行布局
- 使用绝对布局，一个居中，一个居右。
- 其中box1，左上距离父布局50%，然后自身偏移50%，使其居中
.box1 {background-color: red;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
<template><div class="container"><div class="box box1">Box 1</div><div class="box box3">Box 3</div></div></template><script>
export default {
};
</script><style scoped>
.container {position: relative;width: 300px;height: 300px;background: #888888;
}.box {position: absolute;width: 100px;height: 100px;text-align: center;line-height: 100px;
}.box1 {background-color: red;top: 50%;left: 50%;transform: translate(-50%,-50%);
}.box3 {background-color: green;top: 50%;right: 0;transform: translateY(-50%);
}
</style>
- 水平方向线性布局
- 设置父布局 display: flex; flex-direction: row;子布局取消position: absolute;即可
.container {display: flex;flex-direction: row;width: 300px;height: 300px;background: #888888;
}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;
}
