ReactDivPositions

by raniceyue

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.parent {
	position: relative;
	width: 400px;
	height: 400px;
	margin: 20px auto;
}

.child1, .child2, .child3 {
	position: absolute;	/* Turn off to see circles in chrome*/
	top: 0;
}

React

/**
*	RED CIRCLE
*/
const Child1 = () => {
	return(
		<div class="child1">
			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
				<circle cx="50%" cy="50%" r="50" fill="red"/>
			</svg>
		</div>
	);
}

/**
*	ORANGE CIRCLE
*/
const Child2 = () => {
	return(
		<div class="child2">
			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
				<circle cx="50%" cy="50%" r="45" fill="orange"/>
			</svg>
		</div>
	);
}

/**
*	GREEN CIRCLE
*/
const Child3 = () => {
	return(
		<div class="child3">
			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
				<circle cx="50%" cy="50%" r="40" fill="yellow"/>
			</svg>
		</div>
	);
}

const App = () => {
	return(
		<div class="main-parent"> {/* Has no styles */}
			<div class="parent">
				<Child1/>
				<Child2/>
				<Child3/>
			</div>
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector("#app"))