更改相对 div 中绝对按钮的顺序 [关闭]答案

【问题标题】：Change order of absolute buttons in relative div [closed]更改相对 div 中绝对按钮的顺序 [关闭]
【发布时间】：2020-08-25 13:02:10
【问题描述】：

我有两个按钮（在状态列中）在相对 div 中的绝对位置，但是当屏幕变小时，这两个按钮会覆盖自身。

有没有办法改变他们的顺序？

实际上我想使用 flex 和 order 来更改哪个按钮位于顶部，但我无法完成。

Tailwind cdn 效果不太好，但我还是创建了笔，请参阅下面的评论。

【问题讨论】：

codepen.io/itepifanio/pen/ZEboeBp

标签： html css tailwind-css

【解决方案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>

【讨论】：