Положение FIXED приводит к переполнению моих изображений даже при> overflow: hidden;

Question

Это заголовок, так что это все, что я написал до сих пор, но по какой-то причине мои изображения длиннее моего заголовка.

Пи c находится в нижней части заголовок, где они переполняются. изображение перелива

    <header>
        <img id="bg-img" src="images/head-img.jpg" alt="bg">
        <img id="logo" src="images/logo-black-bg.png" alt="logo">
    </header>

header {
    margin: 0;
    height: 250px;
    overflow: hidden;
    background: #000;
    position: relative;
}

#logo {
    width: 18%;
    max-height: 100%;
    position: fixed;
    top: 0;
    right: 5%;
}

#bg-img {
        width: 60%;
        position: fixed;
        top: 0;
        left: 0;
    }

Answer 1

Я думаю, вы не понимаете, как работает position, поскольку ваш заголовок на самом деле ни для чего не нужен, поскольку все элементы, содержащиеся в нем, позиционируются fixed, что означает, что они берут свою ширину, высоту и позицию справочного кадра из viewport и not ваш элемент заголовка. Я также не понимаю, зачем вы помещаете туда фоновое изображение, если CSS предоставляет прекрасное свойство background, которым можно гораздо легче управлять.

Для вашей цели я бы предложил что-то вроде примера ниже, но я бы даже добавил go и сказал вам, что позиционирование вашего lo go absolute в какой-то момент будет проблемой - вы добавляете меню, текст и c ... в свой заголовок и все внезапные объекты позади вашего lo go. В этом случае лучшим решением может быть flexbox:

header {
    display: flex;
    justify-content: right;
    align-items: stretch;
}

Если вы теперь добавите отступ в свой заголовок, ваш lo go также получит его бесплатно.

body {
  height: 200vh;
}
header {
    margin: 0;
    width: 100%;
    height: 25vh;
    overflow: hidden;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    background: url('http://via.placeholder.com/300x200/444444');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
#logo {
    width: 18%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 5%;
}

<header>
  <img id="logo" src="http://via.placeholder.com/100x100" alt="logo">
</header>

Я также скорректировал высоту ваших заголовков, но только для того, чтобы убедиться, что они отображаются правильно, и вы можете визуализировать некоторую прокрутку и фиксированный заголовок.