Изображение логотипа не отображается при изменении размера экрана ⇐ CSS

[Anonymous]

Мне нужно, чтобы изображение логотипа всегда находилось в верхней части экрана, всегда на расстоянии 80 пикселей от верха и центра страницы.
Когда я уменьшаю высоту экрана, изображение логотипа обрезается и не отображается
Как я могу решить эту проблему?
Я пробовал использовать позицию: Absolute, но тогда логотип перекрывается с содержимым, поэтому я не думаю, что вы это делаете.


my SignUpStyles.js
import styled from "styled-components";

export const StyledContainer = styled.div`
box-shadow: inset 0 0 15px blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: scroll;
padding: 0 24px;
box-sizing: border-box;
`;

export const LogoWrap = styled.div`
box-shadow: inset 0 0 15px blue;
display: flex;
justify-content: center;

`;
...


мой SignUp.jsx
import React, { useState } from 'react';
import { StyledContainer, LogoWrap, Input, SignUpButton, SignUpType, NextButton, CurrentSignUpType } from "./styles/SignUpStyles.js";
import logo from "@assets/images/logo_big.svg";

function SignUp() {
const [currentSignUpType, setCurrentSignUpType] = useState(null);
const [showForm, setShowForm] = useState(false);

const signUpType = [
{ name: "signup as seller", type: "seller" },
{ name: "signup as user", type: "user" }
];

const handleSignUpTypeChange = (type) => {
setCurrentSignUpType(type);
setShowForm(true);
};

const renderForm = () => {
...
};

return (







...


...


{showForm && (


{renderForm()}

signup

)}


);
}

export default SignUp;


Подробнее здесь: https://stackoverflow.com/questions/783 ... ing-screen