Есть такой элемент Всяческими способами пытаюсь его выровнять над кнопкой. Код кнопок внизу .buttons{ width: 250px; height: 50px; border-radius: 14px; border: 2px solid #000; background: #DD8EDD; box-shadow: 5px 7px 4px 0px rgba(0, 0, 0, 0.25); color: #FFF; font-family: Ubuntu; font-size: 23px; font-style: normal; font-weight: 700; line-height: normal; padding-top: 11px; padding-left: 76px; padding-right: 75px; padding-bottom: 11px; -webkit-text-stroke: 1.2px #000; } .buttons-discord{ width: 50px; height: 50px; border-radius: 14px; border: 2px solid #000; background: #DD8EDD; box-shadow: 5px 7px 4px 0px rgba(0, 0, 0, 0.25); margin-left: 5px; } .buttons-vk{ width: 50px; height: 50px; border-radius: 14px; border: 2px solid #000; background: #DD8EDD; box-shadow: 5px 7px 4px 0px rgba(0, 0, 0, 0.25); margin-right: 5px; } .button{ display: flex; justify-content: center; padding-bottom: 397px; padding-top: 633px; } CSS .buttons{ width: 250px; height: 50px; border-radius: 14px; border: 2px solid #000; background: #DD8EDD; box-shadow: 5px 7px 4px 0px rgba(0, 0, 0, 0.25); color: #FFF; font-family: Ubuntu; font-size: 23px; font-style: normal; font-weight: 700; line-height: normal; padding-top: 11px; padding-left: 76px; padding-right: 75px; padding-bottom: 11px; -webkit-text-stroke: 1.2px #000; } .buttons-discord{ width: 50px; height: 50px; border-radius: 14px; border: 2px solid #000; background: #DD8EDD; box-shadow: 5px 7px 4px 0px rgba(0, 0, 0, 0.25); margin-left: 5px; } .buttons-vk{ width: 50px; height: 50px; border-radius: 14px; border: 2px solid #000; background: #DD8EDD; box-shadow: 5px 7px 4px 0px rgba(0, 0, 0, 0.25); margin-right: 5px; } .button{ display: flex; justify-content: center; padding-bottom: 397px; padding-top: 633px; } <div class="button"> <button class="buttons-vk"><img src="img/vk.svg"></button> <button class="buttons">Read Me</button> <button class="buttons-discord"><img src="img/discord.svg"></button> </div> HTML <div class="button"> <button class="buttons-vk"><img src="img/vk.svg"></button> <button class="buttons">Read Me</button> <button class="buttons-discord"><img src="img/discord.svg"></button> </div>
viprosser, чтобы выровнять изображение над кнопкой, можно использовать свойство CSS `position: relative` для родительского элемента и свойство `position: absolute` для изображения. Вот как можно изменить код: <div class="button"> <img class="image" src="https://nztcdn.com/files/d45b254d-2c84-435c-a0f3-752763ba7ce7.webp"> <button class="buttons-vk"><img src="img/vk.svg"></button> <button class="buttons">Read Me</button> <button class="buttons-discord"><img src="img/discord.svg"></button> </div> HTML <div class="button"> <img class="image" src="https://nztcdn.com/files/d45b254d-2c84-435c-a0f3-752763ba7ce7.webp"> <button class="buttons-vk"><img src="img/vk.svg"></button> <button class="buttons">Read Me</button> <button class="buttons-discord"><img src="img/discord.svg"></button> </div> .button { position: relative; } .image { position: absolute; top: -50px; /* Расстояние от верхней границы родительского элемента до изображения */ left: 0; } CSS .button { position: relative; } .image { position: absolute; top: -50px; /* Расстояние от верхней границы родительского элемента до изображения */ left: 0; } Попробуйте добавить эти изменения и проверьте, соответствует ли это вашим требованиям.
viprosser, чтобы поместить картинку за кнопку, можно использовать свойство CSS `z-index` для управления порядком слоев элементов. Вот как можно изменить код: <div class="button"> <button class="buttons-vk"><img src="img/vk.svg"></button> <button class="buttons">Read Me</button> <button class="buttons-discord"><img src="img/discord.svg"></button> <img class="image" src="https://nztcdn.com/files/d45b254d-2c84-435c-a0f3-752763ba7ce7.webp"> </div> HTML <div class="button"> <button class="buttons-vk"><img src="img/vk.svg"></button> <button class="buttons">Read Me</button> <button class="buttons-discord"><img src="img/discord.svg"></button> <img class="image" src="https://nztcdn.com/files/d45b254d-2c84-435c-a0f3-752763ba7ce7.webp"> </div> .button { position: relative; } .buttons-discord { position: relative; z-index: 1; /* Устанавливаем кнопку на передний план */ } .image { position: absolute; top: 0; left: 0; z-index: 0; /* Устанавливаем изображение на задний план */ } CSS .button { position: relative; } .buttons-discord { position: relative; z-index: 1; /* Устанавливаем кнопку на передний план */ } .image { position: absolute; top: 0; left: 0; z-index: 0; /* Устанавливаем изображение на задний план */ } Теперь изображение будет отображаться за кнопкой. Попробуйте добавить эти изменения и проверьте результат.