如何为移动响应设置 Z 索引？ HTML / CSS答案

【问题标题】：How to set Z Index for Mobile Responsive ? HTML / CSS如何为移动响应设置 Z 索引？ HTML / CSS
【发布时间】：2021-02-11 18:30:52
【问题描述】：

您好，以下都是我想要实现的预期输出。我试过但缺少一些地方。下面是我的代码。

我使用 Z 索引似乎一切正常，但在移动设备上看到时，设计不符合标准。

下面是我的代码。

<!DOCTYPE html>
<html>
<head>

    <style> 
.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
}
.wrapper div {
  position: absolute;
  height: 25%;
  width: 20%;
}
.wrapper .one {
  top: 26px;
  left: 150px;
  background: blue;
  z-index: 1;
  box-shadow: 0px 10px 50px #00000026;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 40%;
  background: red;
}
.wrapper .three {
  top: 620px;
    left: 450px;
    height: 6%;
    background: green;
}</style>
</head>
<body>
    
<div class="wrapper">
  <div class="one">
    <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
  </div>
  <div class="two"></div>
  <div class="three">Read More</div>
</div>


</body>
</html>

【问题讨论】：

问题是什么？
我无法在 css 中实现所需的输出

标签： html css twitter-bootstrap-3 responsive-design z-index

【解决方案1】：

您应该提供有关您的实际问题的更多详细信息。模型和你的 html + css 有很多不同。

不过，我认为您在布局方面存在普遍问题。对于响应性，您通常应避免使用固定像素 + 绝对位置。这可能适用于一种屏幕尺寸，但不适用于其他屏幕尺寸。尝试使用适当的工具（如 css grid/flex）实现您想要的输出。

但为了这个问题，您可以将one 移动到two：

...
<div class="two">
    <div class="one">
        <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
    </div>
</div>
<div class="three">Read More</div>
...

然后像这样调整你的风格：

.wrapper .one {
  top: -20px;
  left: -20px;
  background: blue;
  z-index: 1;
  box-shadow: 0px 10px 50px #00000026;
  position: relative;
}

PS。你可以用body { margin: 0; }去掉页面周围的白色边框

【讨论】：

【解决方案2】：

   <style>
    body {
        margin: 0px;
        padding: 0px;
    }

    .wrapper {
        position: relative;
        background: #EEE;
        min-height: 100%;
        width: 100%;
        padding: 5px 0px;
    }

    .wrapper div {

        height: 25%;
        width: 20%;
    }

    .wrapper .one {
        height: auto;
        left: -10px;
        top: -10px;
        background: blue;
        z-index: 1;
        box-shadow: 0px 10px 50px #00000026;
        position: absolute;
    }

    .wrapper .two {
        margin: 0px auto;
        min-height: 480px;
        /* max-width: 767px; */
        background: red;
        position: relative;
        margin-top: 20px;
        width: 100%;
        max-width: 480px;
    }

    .wrapper .three {
        bottom: -10px;
        right: -10px;
        display: block;
        width: 100px;
        height: 20px;
        text-align: center;
        background: green;
        position: absolute;

    }

   </style>

将其用作 html

   <div class="wrapper">

    <div class="two">
        <div class="one">
            <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
        </div>
        <div class="three">Read More</div>
    </div>

  </div>

你可以这样试试

【讨论】：

当然让我试试这个