如何设置移动响应的Z索引？ HTML / CSS

问题描述

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

我正在使用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>

解决方法

您应该提供有关实际问题的更多详细信息。样机与您的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; }

来消除页面周围的白色边框 ,

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

u可以这样尝试

html responsive-design twitter-bootstrap-3 z-index