更改相对 div 中绝对按钮的顺序 [关闭]
Posted
技术标签:
【中文标题】更改相对 div 中绝对按钮的顺序 [关闭]【英文标题】：Change order of absolute buttons in relative div [closed] 【发布时间】：2020-08-25 13:02:10 【问题描述】：我有两个按钮（在状态列中）在相对 div 中的绝对位置，但是当屏幕变小时，这两个按钮会覆盖自身。
有没有办法改变他们的顺序？
实际上我想使用 flex 和 order 来更改哪个按钮位于顶部，但我无法完成。
Tailwind cdn 效果不太好，但我还是创建了笔，请参阅下面的评论。
【问题讨论】：
codepen.io/itepifanio/pen/ZEboeBp 【参考方案1】： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
position: relative;
.absolute-div
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 10%;
.flex-div
display: flex;
flex-direction: row;
flex-wrap: wrap;
.flex-div button
width: 33%;
@media screen and (max-width: 992px)
.flex-div
flex-direction: column;
.flex-div button:nth-child(1)
order: 3
.flex-div button:nth-child(2)
order: 1
.flex-div button:nth-child(3)
order: 2
</style>
</head>
<body>
<div class="absolute-div">
<div class="flex-div">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</div>
</div>
</body>
</html>我编写了一个示例示例，在绝对定位的元素上使用 flexbox 来更改宽度低于 990px 的设备的 flex 项的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
position: relative;
.absolute-div
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 10%;
.flex-div
display: flex;
flex-direction: row;
flex-wrap: wrap;
.flex-div button
width: 33%;
@media screen and (max-width: 992px)
.flex-div
flex-direction: column;
.flex-div button:nth-child(1)
order: 3
.flex-div button:nth-child(2)
order: 1
.flex-div button:nth-child(3)
order: 2
</style>
</head>
<body>
<div class="absolute-div">
<div class="flex-div">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</div>
</div>
</body>
</html>
【讨论】：
以上是关于更改相对 div 中绝对按钮的顺序 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章