放大可使div悬停在固定位置的img上

Question

我有一个标题，其中包含徽标的img （ position: fixed ）和一个以边距为中心的grid ，其中包含标题中除徽标以外的所有内容。 HTML看起来像这样：

<div id='header'>
    <img id='logo' src='http://i65.tinypic.com/dw2nw9.png'>
    <div id='header-grid'>
        <div id='item-one'></div>
        <div id='item-two'></div>
        <div id='item-three'></div>
        <div id='item-four'></div>
    </div>
</div>

CSS看起来像这样：

#header {
    position: fixed;
    width: 100%;
    height: var(--header-height);
    background-color: var(--main-color);
    z-index: 3141592;
}

#logo {
    position: fixed;
    max-width: 100px; 
    max-height: var(--header-height);
    padding-left: 10px;
}

#header-grid {
    width: 900px;
    margin: 0 auto;
    height: var(--header-height);
    display: grid;
    grid-template-columns: auto auto auto auto;
}

现在，当我放大时， #header-grid越过#logo 。 我希望他们彼此靠近，而不是一个挨着一个

Answer 1

为您找到了一个网格解决方案：

 #header { position: fixed; width: 100%; height: var(--header-height); background-color: var(--main-color); z-index: 3141592; display: grid; /* add the following */ grid-template-columns: 1fr repeat(2, auto) 1fr; /* not sure about grid but you need the repeat so the second column can be centred */ justify-items: center; } #logo { max-width: 100px; max-height: var(--header-height); margin-left: 10px; /* change this to margin as you shouldn't add padding to images */ margin-right: auto; /* add this to push to the left */ } #header-grid { margin: 0 auto; height: var(--header-height); display: grid; grid-template-columns: auto auto auto auto; grid-column-start: 2; /* add this so it sits in centre */ /* for demo */ width: 300px; border: 1px solid red; } 

 <div id='header'> <img id='logo' src='http://i65.tinypic.com/dw2nw9.png'> <div id='header-grid'> <div id='item-one'></div> <div id='item-two'></div> <div id='item-three'></div> <div id='item-four'></div> </div> </div>