Struggling with an intriguing challenge related to the layout of components in a web application.
Let's take a look at the code snippet MyCompo.js:
import React from "react";
import tblClp from './images/WoodSquare.jpg';
import dwnArwClp from './images/DownArrow.png';
import upArwClp from './images/UpArrow.png';
import './MyCompo.css';
class MyCompo extends React.Component {
render() {
const elements = [...Array(3).keys()]
const items = []
for (const [index, value] of elements.entries()) {
items.push(<SquareUnit index={index}/>)
}
return (
<div>
{items}
</div>
)
}
}
class SquareUnit extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<React.Fragment>
<div id={this.props.index}>
<div><img src={tblClp} width='130' height='109'/>
<div className="overlay down">
<img src={dwnArwClp} width='40' height='40'/>
</div>
<div className="overlay up">
<img src={upArwClp} width='40' height='40'/>
</div>
</div>
</div>
</React.Fragment>
)
}
}
export default MyCompo;
Now let's take a glimpse at the style sheet MyCompo.css:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
opacity: 0.3;
transition: .3s ease;
background-color: transparent;
bottom: 0;
right: 0;
}
.down {
top: -24%;
left: 3%;
}
.up {
top: -76%;
left: 65%;
}
.container {
position: relative;
width: 100%;
max-width: 400px;
}
While developing, I use this command in the terminal:
$ npm start
After fine-tuning the .down {...} and .up {...} sections within MyCompo.css and saving the file, this is what appears in the browser:
https://i.sstatic.net/CTHMs.png
The visual representation consists of three wooden square blocks, each adorned with overlayed up and down arrows.
In the above screenshot, the displayed image matches my expectations perfectly.
However, upon refreshing the browser window, the display transforms into something unexpected:
https://i.sstatic.net/vSC7s.png
This deviation from the expected output begs the question: What might be amiss in either my code MyCompo.js or MyCompo.css causing this discrepancy?