CODEWITHSUNDEEP
cssreactjs
Chinomso Johnson
Chinomso Johnson

Reputation: 189

How can I use absolute and relative positioning on images correctly?

How can I position images to stack on each other? The first Image is positioned relatively and subsequent images are positioned absolutely. On bigger screen sizes, the images positioned absolutely move leftward and on mobile, they are just over the place depending on screen size. How can I get them to stay on each other whenever they are needed?

This is the JSX code

class PizzaBuilder extends Component {
  render (){
 return(
<div>
                   <img className={styles.Pizzapan} src={Pizzapan} alt="pizzapan"/>
                   <div>
                     <div className={styles.Sauce} >
                     <div>
                      <img style={{display: this.state.toggle === "Marinara"?"block":null, position:'absolute', zIndex: '100', height: '400px', width: '400px', top:'375px', left: '130px'}}  src={Marinara} alt="marinara"/>
                     </div>
                     <div>
                      <img style={{display: this.state.toggle === "Ranchdressing"?"block":null, position:'absolute', zIndex: '100', height: '400px', width: '400px', top:'375px', left: '130px'}} src={Ranchdressing} alt = "ranchdressing"/>
                     </div>
                     <div>
                      <img style={{display: this.state.toggle === "bbqsauce"?"block":null, position:'absolute', zIndex: '100', height: '400px', width: '400px', top:'375px', left: '130px'}} src={Bbqsauce} alt="bbqsauce"/>
                    </div>
                    </div>
            </div>
</div>
)

}

}

Corresponding CSS styles

.Pizzapan {
  width: 400px;
  height: 400px;
  position: relative;
}

The relative position is set on the image "pizzapan".

Upvotes: 0

Views: 113

Answers (1)

stella_geo
stella_geo

Reputation: 86

You need to use "position:relative" to the parent div

.mypizza{
  position:relative
}
<div class="mypizza" >

Upvotes: 1

Related Questions