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

Question

我有一个标题$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE); 标题（array_multisort(array_map('filemtime', $files), SORT_NUMERIC, SORT_DESC, $files); ）和img使用边距居中，其中包含标题以外的标识。 HTML看起来像这样：

position: fixed

CSS看起来像这样：

grid

现在，当我放大时，<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> 会越过#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; } 。我希望他们彼此相邻，而不是一个人站在另一个

之上

Answer 1

为您找到网格解决方案：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;