时间戳

首页 > 解决方案 > 使用 z-index 时的流体测量

html - 使用 z-index 时的流体测量

问题描述

我当前的尝试基于此线程 https://intellipaat.com/community/22509/how-to-overlay-one-div-over-another-div

但我的问题是，当我像在另一个线程中使用固定测量值时，虽然我可以让两层的宽度和高度完全相同，但我无法让顶层的高度满足底部的高度当我将宽度切换到包装器 div 的 95% 时的图层。

这是我的固定测量代码：

.banner {
        margin: 0 auto;
        width: 500px;
        height: 500px;
        position: relative;
    }
    .backplane, .frontplane {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .backplane {
        border: 10px solid black;
    }
    .frontplane {
        border: 10px solid blue;
        border-radius: 50px;
        background-opacity: 0;
        text-align: center;
        z-index: 10;
    }
    h2 {
        font-size: 3em;
        line-height: 0;
        text-align: center;
    }

这是用于 95% 宽度包装器的流体测量的 CSS。如果我向 .backplane, .frontplane {} 类添加 100% 的高度，则前面板的视图会变得混乱。

.banner {
        margin: 0 auto;
        width: 95%; 
        position: relative;
    }
    .backplane, .frontplane {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .backplane {
        border: 10px solid black;
    }
    .frontplane {
        border: 10px solid blue;
        border-radius: 50px;
        background-opacity: 0;
        text-align: center;
        z-index: 10;
    }
    h2 {
        font-size: 3em;
        line-height: 0;
        text-align: center;
    }

这是我的 HTML

    <div class="banner">
    <div class="backplane" id="back">
        <img src="background.jpg" width="100%" alt=" ">
    </div>

    <div class="frontplane" id="front">
        <img src="mars.jpg" width="30%" margin="0 auto" alt="Mars Logo">
        <h2>Hello World!</h2>
    </div>
</div>

我想也许可以使用 JavaScript 来获取流体背板的高度并将其分配给前板，如下所示：

document.getElementById("front").height() = document.getElementById("back").height();

但这似乎无济于事。

这是第一个具有固定测量值的示例的屏幕截图

固定测量

这是第二个流体测量示例的屏幕截图。两层的宽度都正确，但高度不正确。蓝色边框显示高度在哪里。它需要匹配黑色边框。

流体测量

有人可以建议一种使公会高度正常工作的方法吗？那将不胜感激。

标签： htmlcssresponsivez-index

解决方案

为了相对设置元素的尺寸（x％）。父级 (.banner) 用于此目的。由于您position: absolute;在正面和背面进行设置，因此没有更多内容可以防止父级折叠。基本上你正在阅读一个空 div 的高度。

通过将背面保留为默认位置，.banner具有防止其折叠的内容。

.banner {
  margin: 0 auto;
  width: 95%;
  position: relative;
}

/* .backplane, */
.frontplane {
  /* width: 100%; */
  position: absolute;
}

.backplane {
  border: 10px solid black;
}

.frontplane {
  border: 10px solid blue;
  border-radius: 50px;
  /* background-opacity: 0; /* this does not exist use: background-color: transparent; */
  text-align: center;
  z-index: 10;
  /* tie to perimeter */
  top: 0;
  right: 0;
  left: 0;
  bottom: 0
}

h2 {
  font-size: 3em;
  line-height: 0;
  text-align: center;
}
<div class="banner">
  <div class="backplane" id="back">
    <img src="https://dummyimage.com/600x400/DDD/EEE&text=back" width="100%" alt=" ">
  </div>

  <div class="frontplane" id="front">
    <img src="https://dummyimage.com/300x200/CCC/777&text=front" width="30%" margin="0 auto" alt="Mars Logo">
    <h2>Hello World!</h2>
  </div>
</div>

推荐阅读