Адаптивный дизайн - поместите элемент в относительное положение

Question

Я пытаюсь поместить <div> в определенную позицию сверху изображения.Ширина изображения установлена ​​на 100%, чтобы всегда соответствовать экрану.

Моя проблема заключается в том, что позиция <div> не относится к экрану как к изображению.

В этом примере яя пытаюсь разместить div, прикрепленный к серой линии (даже если разрешение экрана изменилось).

https://codepen.io/eyalankri/pen/GdGvGO

Возможно ли это?

Answer 1

Попробуйте это codepen .

Вам нужно задать ширину в процентах для вашего значения и сделать левую позицию также в процентных единицах, чтобы она соответственно изменяла размер экрана.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: black
}

.slider-container {
    z-index: 0;
    min-width:1024px;
  position: relative;
     
}

.slide-image {
    width: 100%;
    min-width:1024px
}

.form-container {
    z-index: 999;
    position: absolute;
    top: 0;
    height: 300px;
    width:11%;
  
    background-color: white;
    text-align:center; 
    left: 27.5%; 
     
}

  

    <div class="slider-container">
        <div class="form-container">
      <br/>
       my div
    </div>
        <img class="slide-image" src="http://ecocar.co.il/test1.jpg" />
    </div>