你可以在CSS中移動React創建的組件？對？

Question

我爲這個愚蠢的問題提前道歉。

我使用creat-react-app樣板創建了一系列組件。我將它們導入到app.js中，並且它們按預期呈現，但是如果我嘗試通過給我的組件一個id標記來使用app.css移動頁面上的組件。什麼都沒發生。

我錯過了什麼？我認爲，一旦你導入組件，你可以把它作爲另一個HTML元素在頁面上。

我再次爲這個簡單的問題表示歉意，對任何幫助表示感謝。

按要求代碼：

我的組件之一;

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; 

這裏是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; 

這裏是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

我回答我自己的問題。答案分兩部分。

1. 我需要的CSS position: fixed;改變position: relative;

如果我理解正確的CSS固定位置基本上是網頁的世界座標和CSS的相對位置的局部座標父對象。

1. 要移動React組件，我創建了一個<div>，其中創建了React組件並使用CSS移動了<div>。

我毫不懷疑，可能有更優雅的方式，但這是如何解決我的問題。