You can move React created components in CSS? Right?

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.

1. 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.

2. 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.