当两个图像彼此重叠时，绝对定位与最大宽度混淆

Question

https://codepen.io/kingPear/pen/vzxgXL

我在 codepen 上创建了这项调查，并想做一个有趣的事情，我将这张狗的照片放在猫的照片上，然后让狗的照片淡出以显示猫的照片。我对狗使用了绝对定位，并使用 css 动画更改了不透明度。

无论如何，我注意到当我缩小窗口时，图像不像文字那样灵活，所以我这样做了：

**max-width:100%;**

用于狗 id 和猫 id。

id 被称为#dog 和#cat。

一只猫工作得很好，因为它的位置：相对但狗不工作，因为它的位置是绝对的。有关如何解决此问题的任何想法？

#number-label {
  margin-left: 23px;
}

#number {
  width: 142.5px;
}

#dog {
  width: auto;
  max-width: 100%;
  height: 300px;
  position: absolute;
  animation-name: toCat;
  animation-duration: 10s;
  animation-fill-mode: forwards;
}

#cat {
  width: auto;
  max-width: 100%;
  height: 300px;
}

@keyframes toCat {
  100% {
    opacity: 0.5;
  }
}

body {
  position: relative;
  margin: auto;
  width: 30%;
  background: #FFC986;
}

main {
  font-family: Chalkboard;
  line-height: 170%;
  background: white;
  padding: 20px;
  margin-right: -70px;
  padding-bottom: 40px;
}

#title {
  text-align: center;
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes bounce {
  100% {
    width: auto;
    color: #E87900;
    transform: scale(1.05);
  }
}

#description {
  text-align: center;
  max-width: 100%;
}

#submit {
  background-color: #FFC94D;
  border-radius: 30%;
  border-style: solid;
  border-color: #FFC94D;
  transform: scale(1.5);
  position: relative;
  top: 20px;
  left: 230px;
  animation-name: submit-retract;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#submit:hover {
  border-color: #E87900;
  animation-name: submit-bounce;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#submit:active {
  border-color: #E87900;
  background-color: #E87900;
}

@keyframes submit-bounce {
  100% {
    transform: scale(1.8);
  }
}

@keyframes submit-retract {
  0% {
    transform: scale(1.8);
  }
}

<main>
  <img id="dog" src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
  <img id="cat" src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
  <h1 id="title">Cat Survey</h1>
  <p id="description"> A survey to see the impact a cat can how on you!</p>
  <br>
  <form id="survey-form">

    <label for="name" id="name-label">* Name:
          <input id="name" type="text" placeholder="Enter your name" required>
          </label>
    <br>
    <label for="email" id="email-label">* Email:
            <input type="email" id="email" placeholder="Enter your email" required>
          </label>
    <br>
    <label for="number" id="number-label">Age:
            <input type="number" min=1 max=100 id="number" placeholder="Enter your age">
            <br>
            
            <p> What best describes your life right now?</p>
            <select id="dropdown">
              <option disabled value selected="select">Select an option</option>
              <option value="happy">happy</option>
              <option value="sad">sad</option>
              <option value="average">average</option>
              <option value="extra">extraordinary</option>
            </select>
            
            <p>Do you think having a cat could make things better?</p>
            <label>
              <input type="radio" name="radio1" value=1> Yes
              <input type="radio" name="radio1" value=2> No
              <input type="radio" name="radio1" value=3> Maybe
            </label>

    <p>Do you find cats to be charming?</p>
    <label>
            <input type="radio" name="radio2" value=1> No they are freeloaders.<br>
             <input type="radio" name="radio2" value=2> Yes, they are very interesting creatures<br>
             <input type="radio" name="radio2" value=3> I am indifferent towards them
            </label>

    <p> Select all the qualities you look for in a cat:</p>
    <label>
            <input type="checkbox" name="checkbox1" value=1> Young
            <input type="checkbox" name="checkbox1" value=2> Furry
            <input type="checkbox" name="checkbox1" value=3> Big eyes
            <input type="checkbox" name="checkbox1" value=4> Foreign
            <input type="checkbox" name="checkbox1" value=5> None, I dont want one.
            </label>

    <p> If a cat was about to be hit by a car, select all of things you would do:</p>
    <label>
              <input type="checkbox" name="checkbox2" value=1> I would jump in a shield the cat! (bad idea).<br>
              <input type="checkbox" name="checkbox2" value=2> I would let it get hit... and go help it and call animal care immediately.<br>
              <input type="checkbox" name="checkbox2" value=3> I would let it get hit and run away.<br>
              <input type="checkbox" name="checkbox2" value=4> I would try to resurrect the cat using alchemy!<br>
              <input type="checkbox" name="checkbox2" value=5> I would cry and run back home and hug my dog :)<br>
            </label>

    <p>I hope this helped you decide how impactful a cat can be on your life!<br>(It probably didn't) Tell me what I did wrong in the text area!</p>
    <label for="comments">
              <textarea id="comments" style="width:500px; height:100px;" placeholder="I like dogs..."></textarea>
            </label>
    <br>
    <button type="submit" id="submit">Submit</button>
  </form>
</main>

我似乎也无法使调查底部的文本区域变得灵活，所以如果我也能在这方面获得帮助，那就太好了。但图像是我主要需要帮助的。

非常感谢所有帮助！

Answer 1

首先，您需要使main 元素position:relative 相对于它定位，然后您必须在宽度计算中考虑填充。对于 textarea 而不是使用 width:500px 使用 width:100%;max-width:500px 以避免溢出并使其响应。

最好避免更改body 的样式。你可以在main:

#number-label {
  margin-left: 23px;
}

#number {
  width: 142.5px;
}

#dog {
  width: auto;
  max-width: calc(100% - 40px);
  height: 300px;
  position: absolute;
  animation-name: toCat;
  animation-duration: 10s;
  animation-fill-mode: forwards;
}

#cat {
  width: auto;
  max-width: 100%;
  height: 300px;
}

@keyframes toCat {
  100% {
    opacity: 0.5;
  }
}

body {
  background: #FFC986;
}

main {
  font-family: Chalkboard;
  line-height: 170%;
  background: white;
  padding: 20px;
  padding-bottom: 40px;
  position: relative;
  max-width:30%;
  margin:auto;
}

#title {
  text-align: center;
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#comments {
  width: 100%;
  max-width: 500px;
  height: 100px;
}

@keyframes bounce {
  100% {
    width: auto;
    color: #E87900;
    transform: scale(1.05);
  }
}

#description {
  text-align: center;
  max-width: 100%;
}

#submit {
  background-color: #FFC94D;
  border-radius: 30%;
  border-style: solid;
  border-color: #FFC94D;
  transform: scale(1.5);
  position: relative;
  top: 20px;
  left:20px;
  animation-name: submit-retract;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#submit:hover {
  border-color: #E87900;
  animation-name: submit-bounce;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#submit:active {
  border-color: #E87900;
  background-color: #E87900;
}

@keyframes submit-bounce {
  100% {
    transform: scale(1.8);
  }
}

@keyframes submit-retract {
  0% {
    transform: scale(1.8);
  }
}

<main>
  <img id="dog" src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
  <img id="cat" src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
  <h1 id="title">Cat Survey</h1>
  <p id="description"> A survey to see the impact a cat can how on you!</p>
  <form id="survey-form">

    <label for="name" id="name-label">* Name:
          <input id="name" type="text" placeholder="Enter your name" required>
          </label>
    <br>
    <label for="email" id="email-label">* Email:
            <input type="email" id="email" placeholder="Enter your email" required>
          </label>
    <br>
    <label for="number" id="number-label">Age:
            <input type="number" min=1 max=100 id="number" placeholder="Enter your age">
    </label>            
            <p> What best describes your life right now?</p>
            <select id="dropdown">
              <option disabled value selected="select">Select an option</option>
              <option value="happy">happy</option>
              <option value="sad">sad</option>
              <option value="average">average</option>
              <option value="extra">extraordinary</option>
            </select>
            
            <p>Do you think having a cat could make things better?</p>
            <label>
              <input type="radio" name="radio1" value=1> Yes
              <input type="radio" name="radio1" value=2> No
              <input type="radio" name="radio1" value=3> Maybe
            </label>

    <p>Do you find cats to be charming?</p>
    <label>
            <input type="radio" name="radio2" value=1> No they are freeloaders.<br>
             <input type="radio" name="radio2" value=2> Yes, they are very interesting creatures<br>
             <input type="radio" name="radio2" value=3> I am indifferent towards them
            </label>

    <p> Select all the qualities you look for in a cat:</p>
    <label>
            <input type="checkbox" name="checkbox1" value=1> Young
            <input type="checkbox" name="checkbox1" value=2> Furry
            <input type="checkbox" name="checkbox1" value=3> Big eyes
            <input type="checkbox" name="checkbox1" value=4> Foreign
            <input type="checkbox" name="checkbox1" value=5> None, I dont want one.
            </label>

    <p> If a cat was about to be hit by a car, select all of things you would do:</p>
    <label>
              <input type="checkbox" name="checkbox2" value=1> I would jump in a shield the cat! (bad idea).<br>
              <input type="checkbox" name="checkbox2" value=2> I would let it get hit... and go help it and call animal care immediately.<br>
              <input type="checkbox" name="checkbox2" value=3> I would let it get hit and run away.<br>
              <input type="checkbox" name="checkbox2" value=4> I would try to resurrect the cat using alchemy!<br>
              <input type="checkbox" name="checkbox2" value=5> I would cry and run back home and hug my dog :)<br>
            </label>

    <p>I hope this helped you decide how impactful a cat can be on your life!<br>(It probably didn't) Tell me what I did wrong in the text area!</p>
    <label for="comments">
              <textarea id="comments"  placeholder="I like dogs..."></textarea>
            </label>
    <br>
    <button type="submit" id="submit">Submit</button>
  </form>
</main>