- 布局叠加
- 完整代码
- 最外层的Container设置为relative,内部的几个box设置为absolute
js
<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%,使其居中
js
.box1 {
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
- 完整代码
js
<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;即可
js
.container {
display: flex;
flex-direction: row;
width: 300px;
height: 300px;
background: #888888;
}
.box {
//position: absolute;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}