You can move React created components in CSS? Right? - reactjs

Question

I apologizes in advance for this stupid question.
I created a series of components using the creat-react-app boilerplate. I imported them into the app.js and they render as expected but if I try move the components on the page using the app.css by giving my components an id tag. Nothing happens.
What am I missing? I thought that once you import the component you can just treat it as another html element on the page.
Again I apologizes for the simple question and grateful for any help.
As requested code:
one of my components;
import React from 'react';
import {Panel, Image} from 'react-bootstrap';
import galaxy from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/galaxy.jpg';
import David from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/David.jpg';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
bootstrapUtils.addStyle(Panel,'main','backgroundImg');
const IntroPanel =()=>(
<div>
<style type="text/css">
{`
.panel-backgroundImg{
width: 300px;
height: 150px;
border: 1px solid gray;
border-radius: 0px;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
}
#background{
position: fixed;
}
.galaxy-background{
width: 298px;
height: 148px;
}
#galaxy-pos{
position: fixed;
left: 1px;
top: 73px;
}
.DavidProp{
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid gray;
box-shadow: 0 0 0 3px white, 0 0 0 4px gray;
}
#DavidPos{
position: fixed;
left: 110px;
top: 185px;
}
.panel-main {
width: 300px;
height: 150px;
border-radius: 0px;
border: 1px solid gray;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
right: 200px;
}
#mainPanel{
position: fixed;
top: 222px;
left: 0px;
}
.Name{
font-weight: Bold;
}
#NamePos{
position: fixed;
top: 275px;
left: 95.5px;
}
.Intro{
}
#IntroPos{
position: fixed;
top: 300px;
left: 10.5px;
}
.sighting{
font-style: oblique;
font-size: 14px;
font-weight: Bold;
}
`}
</style>
<div>
<Panel bsStyle="backgroundImg" id="background">
<img src={galaxy} className="galaxy-background" id="galaxy-pos" alt="backgroundImg"/>
</Panel>
<Panel bsStyle="main" id="mainPanel">
<p className="Name" id="NamePos">
David Townsend
</p>
<p className="Intro" id="IntroPos">
"I am a Leaf on the wind, Watch how I soar"
<p>-Wash, <span className="sighting">Serenity</span></p>
</p>
</Panel>
</div>
<div>
<Image src={David} className="DavidProp" id="DavidPos" />
</div>
</div>
);
export default IntroPanel;
Here is the App.js:
import React, { Component } from 'react';
import './App.css';
import MenuBar from './Components/MenuBar.js'
import IntroPanel from './Components/IntroPanel.js'
import AboutPanel from './Components/AboutPanel.js'
class App extends Component {
render() {
return (
<div className="App">
<div>
<MenuBar Name="Inside David Townsend's Brain"
LinkName1="Thoughts" Link1="#"
LinkName2="About" Link2="#"
LinkName3="Ideas" Link3="#"
LinkName4="Resume" Link4="#" />
</div>
<div>
<IntroPanel id="test" />
</div>
<div >
<AboutPanel />
</div>
</div>
);
}
}
export default App;
Here is the App.css:
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#test{
position: fixed;
top: 300px;
left: 10.5px;
}

Answer 1

I answered my own question. The answer is in two parts.
I needed to change the css position: fixed; to position: relative;
If I understand it right the css fixed position is basically the world coordinates of the web page and the css relative position is a local coordinate of the parent object.
To move the React component I created a <div> with the created React component inside of it and moved the <div> using CSS.
I have no doubt that there is probably a more elegant way but this is how I solved my issue.