CSS 网格中的重叠图像

Question

我需要两张图片在 CSS 网格布局中重叠而不作弊，并且必须使用 CSS 网格来完成。意味着它应该留在布局单元格中。这是我正在做的事情： "The middle" 应该在图片中居中，并且都在页面中居中，分别是 "banner"-cell

以下 CSS 布局最好保持不变：

.container {
    display: grid;
    grid-template-columns:  15% 70% 15%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-gap: 2px;
    grid-template-areas:
        'banner banner banner'
        'sidebar content fb'
        'sidebar content fb'
        'sidebar content fb'
        'src src src';
}

.banner {
    grid-area: banner;
}

我已经尝试过这些方法：

justify-items: center;
justify-content: center;
align-content: center;
align-self: center;
text-align: center;

绝对位置的方法效果很好，但它完全忽略了网格，所以实际的网格在图片下面。可以对 "banner" 单元格应用填充以下推内容，但这是我想避免的一种作弊行为。

我需要这两张图片在这个 "banner" 单元格中保持重叠，但我运行没有选择，而且没有太多答案，因为 [= =35=] 网格很新。

HTML:

<body class="body">

<div class="container">

    <div class="banner"> 

        <img id="skyline" src="Pictures/SkylinePH.jpg"> 
        <img id="logo" src="Pictures/Logo2.png">            

    </div>  



</div>

非常感谢您的帮助！提前谢谢你:)

Answer 1

The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture.

您不需要 position: absolute 两张图片 - 您可以让横幅图片更大，位于徽标后面，占据 space 它通常会在 CSS 网格单元格。然后你可以绝对定位并将徽标置于其顶部。那行得通吗？

编辑：一些 CSS 尝试完成这个：

.banner {
  position: relative; /* so we can position the logo based on this container */
  text-align: center; /* so the skyline image is horizontally centered */ 
}

#logo {
  position: absolute; /* these 4 lines will center the logo */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

文字覆盖图片。使用 CSS 网格布局。

HTML

<div id="container">
    <img src="some-image.jpg">
    <p>SOME TEXT OVER IMAGE</p>
</div>

CSS

#container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}

#container img{
    grid-column: 1;
    grid-row: 1 / span 3;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

#container p{
    grid-column: 1;
    grid-row: 2;

    align-self: center;
    justify-self: center;

    z-index: 1;
}

图像重叠。使用 CSS 网格布局。

HTML

<div id="container">
    <img id="img-1" src="image-1.jpg">
    <img id="img-2" src="image-2.jpg">
</div>

CSS

#container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}

#container #img-1{
    grid-column: 1;
    grid-row: 1 / span 3;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

#container #img-2{
    grid-column: 1;
    grid-row: 2;

    align-self: center;
    justify-self: center;

    z-index: 1;
}

Answer 3

使用 css grid 不再需要绝对或相对定位。不要忘记在 css grid 中，您可以通过给它们相同的 grid-row 和 grid-column 值然后使用 z-index 将网格堆叠在一起。非常强大 :) 希望这对您有所帮助

CSS 网格中的重叠图像

Overlapping images in CSS grid

html

css

grid

overlap

css-grid