Как установить индекс Z для Mobile Responsive? HTML / CSS

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

#HTML #css #twitter-bootstrap-3 #адаптивный дизайн #z-индекс

Вопрос:

Привет всем, ниже приведен ожидаемый результат, которого я хочу достичь. Я пытался, но кое-где не хватало. Ниже приведен мой код.

Я использую индекс 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>

Ответ №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>

вы можете попробовать так