css 3图像布局-中心图像更大，z索引更高

rjee0c15 于 2023-10-21 发布在其他

关注(0)|答案(4)|浏览(128)

我正在努力实现这一目标

图1和图3将稍微隐藏在图2后面。
我有这个html

<div class="imageBanner">
           <div class="imageLeft">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageCentre">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageRight">
              <img src="https://unsplash.it/600/400/">
           </div>
        </div>

简单的设置，一个包含div，三个子div每个包含一个图像（相同的原始大小）。
当前CSS

.imageBanner {
      display: flex;
      align-items: center;
      width:100%;
      max-width: 1024px;}

   .imageLeft img{
    max-width: 60%;
}

.imageCentre {
    z-index: 9999;
  position: relative;
}

.imageCentre img{
    width: 100%;
}

.imageRight img{
    max-width: 60%;
}

所以我所做的是用flex将图像沿着x轴对齐。然后，我给中心图像一个绝对位置，以便考虑z索引。然而，这就是我遇到的问题，图像并没有像上面的例子那样布局。
这里有一个例子，如果它帮助

.imageBanner {
    display: flex;
    align-items: center;
    width:100%;
    max-width: 1024px;
}

.imageLeft img{
    max-width: 60%;
}

.imageCentre {
    z-index: 9999;
  position: relative;
}

.imageCentre img{
    width: 100%;
}

.imageRight img{
    max-width: 60%;
}

<div class="imageBanner">
               <div class="imageLeft">
                  <img src="https://unsplash.it/600/400/">
               </div>
               <div class="imageCentre">
                  <img src="https://unsplash.it/600/400/">
               </div>
               <div class="imageRight">
                  <img src="https://unsplash.it/600/400/">
               </div>
</div>

我觉得我可能很接近，并会继续尝试，但任何帮助将是伟大的！
谢谢汤姆

css

来源：https://stackoverflow.com/questions/41048201/3-image-layout-center-image-larger-and-higher-z-index

4条答案

按热度按时间

ffx8fchx1#

你有没有想过这样的事情：

.imageBanner {
    display: block;
    position: relative;
    margin: 0 auto;
    width:100%;
    max-width: 1024px;
}

.imageLeft {
  width: 40%;
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
   z-index: -1;
}

.imageCentre {
    width: 60%;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.imageRight {
  width: 40%;
 display: block;
  position: absolute;
  right: 0;
  top: 30px;
   z-index: -1;
}
img {
    width: 100%;
}

<div class="imageBanner">
           <div class="imageLeft">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageCentre">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageRight">
              <img src="https://unsplash.it/600/400/">
           </div>
        </div>

左侧图像的左侧边框可以通过更改left:属性来设置，右侧图像的右侧边框可以更改right:

赞(0）回复(0）举报 2023-10-21

c90pui9n2#

.imageBanner {
      display: flex;
      align-items: center;
      width:100%;
      max-width: 1024px;}

img {
  border: 5px solid red;
  width: 100%;
  height: auto;
}
 .imageBanner {
      display: flex;
      align-items: center;
      width:100%;
      max-width: 1024px;}

img {
  border: 5px solid red;
  width: 100%;
  height: auto;
}

.imageCentre {
  width: 100%;
  z-index: 900;
}

.imageLeft {
  position: relative;
  left: 5%;
}

.imageRight {
  position: relative;
  right: 5%;
}
.imageCentre {
  width: 100%;
}

如小提琴所示：https://jsfiddle.net/fce2n85s/1/

赞(0）回复(0）举报 2023-10-21

bqjvbblv3#

在你的代码中没有什么变化，只是在你的css代码中添加了这个css。如果有用就回答我！

.imageBanner img { 
    border:solid 5px #000
}
.imageLeft {
    text-align:right;
    margin-right:-5px
}

赞(0）回复(0）举报 2023-10-21

z9zf31ra4#

.imageBanner {
    display: flex;
    align-items: center;
    width:100%;
    max-width: 1024px;
}

.imageLeft img{
    max-width: 60%;
}

.imageCentre {
    z-index: 9999;
  position: relative;
}

.imageCentre img{
    width: 100%;
}

.imageRight img{
    max-width: 60%;
}

<div class="imageBanner">
               <div class="imageLeft">
                  <img src="https://unsplash.it/600/400/">
               </div>
               <div class="imageCentre">
                  <img src="https://unsplash.it/600/400/">
               </div>
               <div class="imageRight">
                  <img src="https://unsplash.it/600/400/">
               </div>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 3图像布局-中心图像更大，z索引更高

4条答案

相关问题

热门标签

最新问答