Question

我当时是在Codepen上进行这项调查的，我想做一件有趣的事情，我把这张狗的照片放在猫的照片的正上方，然后让狗的照片淡出以显示猫的照片。我在狗上使用了绝对定位，并使用CSS动画更改了不透明度。

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

**max-width:100%;**

狗和猫的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，以使图像相对于其定位，然后必须在宽度计算中考虑填充。对于文本区域，请使用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>

当两个图像相互叠加时，绝对定位会干扰最大宽度

1 个答案: