删除媒体查询中的绝对位置答案

【问题标题】：Remove position absolute in media query删除媒体查询中的绝对位置
【发布时间】：2022-01-28 22:46:44
【问题描述】：

我正在使用 display: flex 作为容器 (.zone-container) 来定位孩子。但是，我将 position: absolute 应用于其中一个孩子（#camp-zone），以便将其放在其他孩子之上。我想从媒体查询中的子元素中删除 position: absolute 并为所有子元素应用相同的样式（背景颜色除外）。我试图在媒体查询中将具有 position: absolute 的元素和具有 position: relative 的容器的位置设置为静态，但子元素与其他子元素相比仍然具有不同的样式。如何取消设置媒体查询中的特定样式？

.header {
  background-color: navy;
  min-height: 7vh; 
  display: grid;
}

.header h2 {
  color: white;
  text-align: center;
  font-size: 45px;
  font-weight: inherit;
  font-family: arial;
}

.game-area {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  background-color: navy;
  height: 100%;
  min-height: 1000px;
}

.activity-zone-container {
  display: flex;
}

.zone-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 120vh;
  position: relative;
  max-height: 95vh;
  margin: 0%;
}

.zone {
  min-width: 32vh;
  min-height: 27vh;
  margin: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44%;
  height: 33%;
  max-height: 300px;
}

.zone p {
  color: white;
  text-align: center;
  margin-bottom: 15px;
  font-family: arial;
}

#concentration-zone {
  background-color: orange;
}
#communication-zone {
  background-color: yellow;
}
#communication-zone p {
  color: black;
}
#collaboration-zone {
  background-color: #3260a8;
}
#chill-out-zone {
  background-color: pink;
}
#chill-out-zone p {
  color: black;
}
#camp-zone {
  justify-content: center;
  background-color: green;
  justify-self: center;
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  width: 44%;
  height: 33%;
  min-width: 32vh;
  min-height: 27vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  left: 0;
  top: 0;
}
.activity-container {
  margin: 0;
  max-width: 73vh;
  display: flex;
  flex-wrap: wrap;
  width: 40%;
}

.activity {
  background-color: #3260a8;
  margin: 17px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  width: 140px;
  height: 87px;
}
.activity-concentration {
  background-color: orange;
  margin: 17px;
  display: flex;
  justify-content: center;
  color: white;
  width: 140px;
  height: 87px;
}
.activity-communication {
  background-color: yellow;
  margin: 17px;
  display: flex;
  justify-content: center;
  width: 140px;
  height: 87px;
}
.activity-chill-out {
  background-color: pink;
  margin: 17px;
  display: flex;
  justify-content: center;
  width: 140px;
  height: 87px;
}
.activity-camp {
  background-color: green;
  margin: 17px;
  display: flex;
  justify-content: center;
  color: white;
  width: 140px;
  height: 87px;
}
.activity p {
  color: white;
}

@media (max-width: 768px)  {

  .game-area {
    min-height: 150vh;
  }

  .header h2 {
    margin: 15px;
    font-size: 30px;
  }

  .zone {
    width: 220px;
    height: 180px;
  }

  #camp-zone {
    position: static;
    width: unset;
    height: unset;
    margin-top: unset;
    justify-content: unset;
    justify-self: unset;
    z-index: unset;
    bottom: unset;
    right: unset;
    width: unset;
    height: unset;
    min-width: unset;
    min-height: unset;
    margin-left: unset;
    margin-right: unset;
    margin-bottom: unset;
    left: unset;
    top: unset;
  }

<html lang
<body>
    <div id="app">
        <section class="header">
            <h2>Click on an activity box to see which area it belongs to</h2>
        </section>
        <section class="game-area">
            <div class="activity-zone-container">
                <div class="zone-container">
                    <div class="zone" id="concentration-zone">
                        <p>Concentration</p>
                    </div>
                    <div class="zone" id="communication-zone">
                        <p>Communication</p>
                    </div>
                    <div class="zone" id="collaboration-zone">
                        <p>Collaboration</p>
                    </div>
                    <div class="zone" id="chill-out-zone">
                        <p>Chill Out</p>
                    </div>
                    <div class="zone" id="camp-zone">
                        <p>Camp</p>
                    </div>
                </div>
                <div class="activity-container">
                    <button class="activity" activitytype="concentration">
                        <p>Code</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Teams Meeting</p>
                    </button>
                    <button class="activity" activitytype="camp">
                        <p>Make a phone call</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Work shops with colleagues</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Coffee break</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Lively discussions/brainstorming</p>
                    </button>
                    <button class="activity" activitytype="camp">
                        <p>Long group work</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Creative zone for problem solving</p>
                    </button>
                    <button class="activity" activitytype="concentration">
                        <p>Concentrate on task</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Not bothered by phone calls/chatting</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Collaboration &amp; Planning</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Coffee break with groups</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Prepare a presentation together</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Think for yourself</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Meeting with no sensitive info</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Quick, spontaneous meetings</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Have a chat without disturbance</p>
                    </button>
                    <button class="activity" activitytype="camp">
                        <p>Room for external/internal parties</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Private dialogue</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Read a contract in silence</p>
                    </button>
                    <button class="activity" activitytype="concentration">
                        <p>Individual work without disturbance</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Check e-mails</p>
                    </button>
                    <button class="activity" activitytype="concentration">
                        <p>Calm &amp; quiet work space</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Hangout with colleagues outside project</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Plan work</p>
                    </button>
                    <button class="activity" activitytype="communication">
                        <p>Lead employees/team</p>
                    </button>
                    <button class="activity" activitytype="concentration">
                        <p>Analyze data</p>
                    </button>
                    <button class="activity" activitytype="concentration">
                        <p>Rest</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Chat with a colleague about weekend plans</p>
                    </button>
                    <button class="activity" activitytype="collaboration">
                        <p>Discuss solutions for challenges in projects</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Pause from work</p>
                    </button>
                    <button class="activity" activitytype="camp">
                        <p>Private room for team/project for a long time</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Coffee with colleagues</p>
                    </button>
                    <button class="activity" activitytype="chillout">
                        <p>Networking</p>
                    </button>
                </div>
            </div>
        </section>
    </div>
    <script src="index.js" type="text/javascript"/>
    <script src="/static/js/bundle.js"/>
    <script src="/static/js/0.chunk.js"/>
    <script src="/static/js/main.chunk.js"/>
</body>
</html>

【问题讨论】：

标签： css flexbox media-queries css-position

【解决方案1】：

请将您的 CSS 更改为此。 @media (min-width: 767px){} 中的代码仅适用于大于 767px 的屏幕。较小的屏幕（例如@media (max-width: 768px){}）将完全忽略它。

.header {
    background-color: navy;
    min-height: 7vh; 
    display: grid;
}

.header h2 {
    color: white;
    text-align: center;
    font-size: 45px;
    font-weight: inherit;
    font-family: arial;
}

.game-area {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    background-color: navy;
    height: 100%;
    min-height: 1000px;
}

.activity-zone-container {
    display: flex;
}

.zone-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 120vh;
    position: relative;
    max-height: 95vh;
    margin: 0%;
}

.zone {
    min-width: 32vh;
    min-height: 27vh;
    margin: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44%;
    height: 33%;
    max-height: 300px;
}

.zone p {
    color: white;
    text-align: center;
    margin-bottom: 15px;
    font-family: arial;
}

#concentration-zone {
    background-color: orange;
}
#communication-zone {
    background-color: yellow;
}
#communication-zone p {
    color: black;
}
#collaboration-zone {
    background-color: #3260a8;
}
#chill-out-zone {
    background-color: pink;
}
#chill-out-zone p {
    color: black;
}
#camp-zone {
    background-color: green;
}
.activity-container {
    margin: 0;
    max-width: 73vh;
    display: flex;
    flex-wrap: wrap;
    width: 40%;
}

.activity {
    background-color: #3260a8;
    margin: 17px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    width: 140px;
    height: 87px;
}
.activity-concentration {
    background-color: orange;
    margin: 17px;
    display: flex;
    justify-content: center;
    color: white;
    width: 140px;
    height: 87px;
}
.activity-communication {
    background-color: yellow;
    margin: 17px;
    display: flex;
    justify-content: center;
    width: 140px;
    height: 87px;
}
.activity-chill-out {
    background-color: pink;
    margin: 17px;
    display: flex;
    justify-content: center;
    width: 140px;
    height: 87px;
}
.activity-camp {
    background-color: green;
    margin: 17px;
    display: flex;
    justify-content: center;
    color: white;
    width: 140px;
    height: 87px;
}
.activity p {
    color: white;
}

@media (min-width: 767px)  {
    #camp-zone {
        justify-content: center;
        justify-self: center;
        position: absolute;
        z-index: 0;
        bottom: 0;
        right: 0;
        width: 44%;
        height: 33%;
        min-width: 32vh;
        min-height: 27vh;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        left: 0;
        top: 0;
    }
}

@media (max-width: 768px)  {
    .game-area {
        min-height: 150vh;
    }

    .header h2 {
        margin: 15px;
        font-size: 30px;
    }

    .zone {
        width: 220px;
        height: 180px;
    }
}

【讨论】：