I want the lower div (containing the image and the button) to collide as in not overlap with the division above it (texts' divisions), so when the button hits, collides, with the division above it the button moves down squishing the image under it if there is no space available. You can see the GIF to visualize what I'm trying to do.
I tried putting both divisions on the same z-index since they weren't but that was futile.
.content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
flex: 1 0 auto;
}
.waveContainer {
position: absolute;
z-index: -1;
max-height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wave {
position: absolute;
z-index: -1;
}
.flexParent {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1610px;
bottom: 0;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
z-index: 1;
}
.contact {
width: 300px;
height: 71px;
border: none;
background: #009ABC;
border-radius: 18px;
border-style: solid;
border-color: #ffffff;
font-family: Alata;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-align: center;
letter-spacing: 0.3em;
color: #ffffff;
}
.contactContainer {
z-index: 2;
max-height: 500px;
}
.programmer {
max-height: 500px;
}
#programmer {
max-width: 100%;
height: auto;
}
<div class="content">
<div class="flexParent">
<div class="programmer">
<svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g clip-path="url(#clip0)">
<path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" />
<path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" />
<path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" />
<path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" />
<path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" />
<path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" />
<path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" />
<path d="M404.397 141.047H250.498C250.183 141.047 249.881 140.922 249.659 140.699C249.436 140.476 249.311 140.174 249.311 139.859C249.311 139.544 249.436 139.242 249.659 139.02C249.881 138.797 250.183 138.672 250.498 138.672H404.397C404.553 138.672 404.708 138.702 404.852 138.762C404.996 138.822 405.127 138.909 405.237 139.02C405.347 139.13 405.435 139.261 405.495 139.405C405.554 139.549 405.585 139.703 405.585 139.859C405.585 140.015 405.554 140.17 405.495 140.314C405.435 140.458 405.347 140.589 405.237 140.699C405.127 140.809 404.996 140.897 404.852 140.956C404.708 141.016 404.553 141.047 404.397 141.047V141.047Z" fill="#F2F2F2" />
<path d="M297.76 154.11H199.911C199.596 154.11 199.294 153.985 199.071 153.763C198.849 153.54 198.723 153.238 198.723 152.923C198.723 152.608 198.849 152.306 199.071 152.083C199.294 151.86 199.596 151.735 199.911 151.735H297.76C298.075 151.735 298.377 151.86 298.6 152.083C298.823 152.306 298.948 152.608 298.948 152.923C298.948 153.238 298.823 153.54 298.6 153.763C298.377 153.985 298.075 154.11 297.76 154.11V154.11Z" fill="#F2F2F2" />
<path d="M404.397 154.348H306.548C306.233 154.348 305.931 154.223 305.708 154C305.486 153.777 305.36 153.475 305.36 153.16C305.36 152.845 305.486 152.543 305.708 152.321C305.931 152.098 306.233 151.973 306.548 151.973H404.397C404.712 151.973 405.014 152.098 405.237 152.321C405.46 152.543 405.585 152.845 405.585 153.16C405.585 153.475 405.46 153.777 405.237 154C405.014 154.223 404.712 154.348 404.397 154.348V154.348Z" fill="#F2F2F2" />
<path d="M297.998 167.174H200.148C199.834 167.174 199.531 167.049 199.309 166.826C199.086 166.603 198.961 166.301 198.961 165.986C198.961 165.671 199.086 165.369 199.309 165.147C199.531 164.924 199.834 164.799 200.148 164.799H297.998C298.313 164.799 298.615 164.924 298.838 165.147C299.06 165.369 299.186 165.671 299.186 165.986C299.186 166.301 299.06 166.603 298.838 166.826C298.615 167.049 298.313 167.174 297.998 167.174V167.174Z" fill="#F2F2F2" />
<path d="M298.236 180.238H200.386C200.071 180.238 199.769 180.112 199.546 179.89C199.324 179.667 199.198 179.365 199.198 179.05C199.198 178.735 199.324 178.433 199.546 178.21C199.769 177.987 200.071 177.862 200.386 177.862H298.236C298.55 177.862 298.853 177.987 299.075 178.21C299.298 178.433 299.423 178.735 299.423 179.05C299.423 179.365 299.298 179.667 299.075 179.89C298.853 180.112 298.55 180.238 298.236 180.238V180.238Z" fill="#F2F2F2" />
<path d="M342.648 128.221H314.623C314.308 128.221 314.006 128.096 313.783 127.873C313.561 127.65 313.435 127.348 313.435 127.033C313.435 126.718 313.561 126.416 313.783 126.193C314.006 125.971 314.308 125.846 314.623 125.846H342.648C342.963 125.846 343.265 125.971 343.487 126.193C343.71 126.416 343.835 126.718 343.835 127.033C343.835 127.348 343.71 127.65 343.487 127.873C343.265 128.096 342.963 128.221 342.648 128.221V128.221Z" fill="#F2F2F2" />
<path d="M342.648 167.174H314.623C314.308 167.174 314.006 167.049 313.783 166.826C313.561 166.603 313.435 166.301 313.435 165.986C313.435 165.671 313.561 165.369 313.783 165.147C314.006 164.924 314.308 164.799 314.623 164.799H342.648C342.963 164.799 343.265 164.924 343.487 165.147C343.71 165.369 343.835 165.671 343.835 165.986C343.835 166.301 343.71 166.603 343.487 166.826C343.265 167.049 342.963 167.174 342.648 167.174V167.174Z" fill="#F2F2F2" />
<path d="M342.648 180H314.623C314.467 180 314.312 179.97 314.168 179.91C314.023 179.851 313.892 179.763 313.782 179.653C313.671 179.543 313.583 179.412 313.524 179.267C313.464 179.123 313.433 178.969 313.433 178.812C313.433 178.656 313.464 178.502 313.524 178.357C313.583 178.213 313.671 178.082 313.782 177.972C313.892 177.861 314.023 177.774 314.168 177.714C314.312 177.655 314.467 177.624 314.623 177.625H342.648C342.804 177.624 342.959 177.655 343.103 177.714C343.247 177.774 343.379 177.861 343.489 177.972C343.6 178.082 343.687 178.213 343.747 178.357C343.807 178.502 343.838 178.656 343.838 178.812C343.838 178.969 343.807 179.123 343.747 179.267C343.687 179.412 343.6 179.543 343.489 179.653C343.379 179.763 343.247 179.851 343.103 179.91C342.959 179.97 342.804 180 342.648 180V180Z" fill="#F2F2F2" />
<path d="M389.673 180H361.648C361.333 179.999 361.032 179.874 360.81 179.651C360.587 179.429 360.463 179.127 360.463 178.812C360.463 178.498 360.587 178.196 360.81 177.974C361.032 177.751 361.333 177.625 361.648 177.625H389.673C389.829 177.624 389.983 177.655 390.128 177.714C390.272 177.774 390.403 177.861 390.514 177.972C390.624 178.082 390.712 178.213 390.772 178.357C390.832 178.502 390.863 178.656 390.863 178.812C390.863 178.969 390.832 179.123 390.772 179.267C390.712 179.412 390.624 179.543 390.514 179.653C390.403 179.763 390.272 179.851 390.128 179.91C389.983 179.97 389.829 180 389.673 180V180Z" fill="#F2F2F2" />
<path d="M227.223 141.047H199.198C198.884 141.047 198.581 140.922 198.359 140.699C198.136 140.476 198.011 140.174 198.011 139.859C198.011 139.544 198.136 139.242 198.359 139.02C198.581 138.797 198.884 138.672 199.198 138.672H227.223C227.538 138.672 227.84 138.797 228.063 139.02C228.286 139.242 228.411 139.544 228.411 139.859C228.411 140.174 228.286 140.476 228.063 140.699C227.84 140.922 227.538 141.047 227.223 141.047V141.047Z" fill="#F2F2F2" />
<path d="M297.404 320.374H199.555C199.24 320.374 198.938 320.249 198.715 320.026C198.492 319.803 198.367 319.501 198.367 319.186C198.367 318.871 198.492 318.569 198.715 318.346C198.938 318.124 199.24 317.999 199.555 317.999H297.404C297.719 317.999 298.021 318.124 298.244 318.346C298.467 318.569 298.592 318.871 298.592 319.186C298.592 319.501 298.467 319.803 298.244 320.026C298.021 320.249 297.719 320.374 297.404 320.374Z" fill="#F2F2F2" />
<path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" />
</g>
<defs>
<clipPath id="clip0">
<rect width="594" height="451" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="contactContainer">
<button class="contact" onclick="document.location.href='contact.html'"> VIEW </button>
</div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
