CODEWITHSUNDEEP
htmlcssresponsive-design
Eyal
Eyal

Reputation: 4763

Responsive design - place an element in a relative position

I am trying to place a <div> in a specific position on top of an image. The image width is set to 100% to always fit the screen.

My problem is that the <div> position is not relative to the screen as the image.

In this example, I am trying to place the div attached to the gray line (even if the screen resolution changed).

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

Is it possible?

Upvotes: 0

Views: 959

Answers (1)

patelarpan
patelarpan

Reputation: 7991

Try out this codepen.

You need to give percentage width to your give, and make left position also in percentage unit, so it changes accordingly screen size.

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>

Upvotes: 1

Related Questions