I am using ReactJs. I want to change a position of the image dynamically.

I am trying to set up style like described here:

My sprite.js:

'use strict';
import '../res/my_css.css'

const React = require('react');
const ReactDOM = require('react-dom');

class Sprite extends React.Component {
  render() {
    var left = 5000 + 'px';
    var top = 5000 + 'px';
    var padding = 5000 + 'px';
    return (
        <div id="bird" style={{padding:padding, left: left, top:top}}/>
    )
  }
}

export default Sprite;
ReactDOM.render(
  <Sprite />,
  document.getElementById('sprite')
)

My css contains:

#bird {
  background:url('../res/bird.png');
  background-repeat: no-repeat;
}

I see the image, but style={{padding:padding, left: left, top:top}} does not applied.

If I look to the source code in Chrome, I see the style padding:5000px, left:5000px, top:5000px. But my image is in the left top corner.

How can I dinamically change the position of the div element (image in my case) in ReactJs?

I am using ReactJs. I want to change a position of the image dynamically.

I am trying to set up style like described here:

My sprite.js:

'use strict';
import '../res/my_css.css'

const React = require('react');
const ReactDOM = require('react-dom');

class Sprite extends React.Component {
  render() {
    var left = 5000 + 'px';
    var top = 5000 + 'px';
    var padding = 5000 + 'px';
    return (
        <div id="bird" style={{padding:padding, left: left, top:top}}/>
    )
  }
}

export default Sprite;
ReactDOM.render(
  <Sprite />,
  document.getElementById('sprite')
)

My css contains:

#bird {
  background:url('../res/bird.png');
  background-repeat: no-repeat;
}

I see the image, but style={{padding:padding, left: left, top:top}} does not applied.

If I look to the source code in Chrome, I see the style padding:5000px, left:5000px, top:5000px. But my image is in the left top corner.

How can I dinamically change the position of the div element (image in my case) in ReactJs?

• javascript
• html
• css
• reactjs

Share Follow edited Mar 12, 2018 at 14:43 Drewness 5,07244 gold badges3535 silver badges5050 bronze badges asked Mar 12, 2018 at 14:24 RuFRuF 55811 gold badge1212 silver badges3232 bronze badges 2

• 2 Have you set position: absolute;? top and left will have no effect otherwise – Hunter McMillen Commented Mar 12, 2018 at 14:25
• @Hunter McMillen position: 'absolute' works, thank you. – RuF Commented Mar 12, 2018 at 14:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try like this.You have not included position:absolute

class Sprite extends React.Component {
      render() {
        var left = 5000 + 'px';
        var top = 5000 + 'px';
        var padding = 5000 + 'px';
        return (
            <div id="bird" style={{padding, left, top,position:'absolute'}}/>
        )
  }
}

To play with left and top add position like this

<div id="bird" style={{position: 'relative', padding, left, top}}/>