html - Elements with both relative and absolute positioning
问题描述
I want to render some elements that are relatively positioned next to each other but are absolutely positioned above everything else. You can see here for what I would like to render and the fiddle below (or this codepen) for my attempt at trying to get it to work. Thanks!
.row {
display: flex;
}
.box {
height: 100px;
width: 100px;
background: yellow;
border: 2px solid red;
margin: 5px;
}
.tallBox {
height: 150px;
width: 100px;
background: orange;
border: 2px solid green;
margin: 5px;
}
.bar {
height: 100px;
width: 442px;
background: pink;
border: 2px solid red;
margin: 5px;
}
.group {
display: flex;
// position: absolute;
}
.gap {
height: 100px;
}
<h2>Proposal: </h2>
<img src="https://i.imgur.com/n1juYRj.png">
<div class="gap"></div>
<h2>Current rendering without any changing any position properties:</h2>
<section class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
<div class="gap"></div>
<h2>Attempt:</h2>
<section class="row special">
<div class="box"></div>
<div class="group">
<div class="tallBox"></div>
<div class="tallBox"></div>
</div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
解决方案
您可能可以考虑负边距并避免使用position:absolute
.row {
display: flex;
}
.box {
height: 100px;
width: 100px;
background: yellow;
border: 2px solid red;
margin: 5px;
}
.tallBox {
height: 150px;
width: 100px;
background: orange;
border: 2px solid green;
margin: 5px;
margin-bottom:-50px;
}
.bar {
height: 100px;
width: 442px;
background: pink;
border: 2px solid red;
margin: 5px;
}
.group {
display: flex;
z-index:2;
}
.gap {
height: 100px;
}
<section class="row special">
<div class="box"></div>
<div class="group">
<div class="tallBox"></div>
<div class="tallBox"></div>
</div>
<div class="box"></div>
</section>
<section class="row">
<div class="bar"></div>
</section>
推荐阅读
- mysql - 在不引用别名但使用 SUM(CASE) 的情况下过滤 MySQL 输出
- python - 在python中为追加或列表获取不同的输出
- json - Flutter 使用 json 检索对象信息
- typescript - 如何在 Typescript 中引用接口的自身属性?
- android - 如何修改菜单下拉容器的背景
- python - 将包从 python 2 编辑到 3 时出现问题
- swift - 不在 View Hierarchy 中时重新加载 UITableView/(一般是控制器)
- python - 两个列表列表的所有组合
- .net - .NET SqlBulkCopy - 可以排除 Null 字段
- javascript - 按名称搜索目录中的文件(不知道扩展名)