How to properly absolute positioning in reactjs

Question

The whole thing is a misunderstanding on my part please ignore!

I have tried to research this problem but the only solution that came up were for react native. My problem basically is that the CSS behaves differently in reactjs environment then in a regular one. Here is what I mean:

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
        <form>
        <div id="cart">

        {/* Cart Header */}

        <div id="cart-header">
          <div id="edit-icon" className="header-icon">
            <p>EDIT</p>
          </div>
          <div className="header-line"></div>
          <div id="payment-icon" className="header-icon">
            <p>PAYMENT</p>
          </div>
          <div className="header-line"></div>
          <div id="confirm-icon" className="header-icon">
            <p>COMFIRM</p>
          </div>
        </div>

        {/* Cart Body */}

        {/* Personal information */}
        <div id="cart-body-left" className="cart-body">
          <h2>Personal information</h2>
          <fieldset id="info-fieldset">

            <div id="name" className="input-div-container">

              <div id="first-name" className="input-div">
                <input type="text" placeholder="First Name"/>
                <label className="input-label">First Name</label>
              </div>

              <div id="last-name" className="input-div">
                <input type="text" placeholder="Last Name"  />
                <label className="input-label">Last Name</label>
              </div>

            </div>

            <div id="email" className="input-div">
              <input type="email" placeholder="Email" />
              <label className="input-label">Email</label>
            </div>

            <div id="number" className="input-div">
              <input type="text" placeholder="Number" />
              <label className="input-label">Number</label>
            </div>

            <div id="address-apt" className="input-div-container">

              <div id="address" className="input-div">
                <input type="text" placeholder="Address" />
                <label className="input-label">Adress</label>
              </div>

              <div id="apt" className="input-div">
                <input type="text" placeholder="Apt, Unit, etc" />
                <label className="input-label">Apt, Unit, etc</label>
              </div>

            </div>

            <div id="zip-city-state" className="input-div-container">

              <div id="zip" className="input-div">
                <input type="text" placeholder="Zip" />
                <label className="input-label">Zip</label>
              </div>

              <div id="city" className="input-div">
                <input type="text" placeholder="City" />
                <label className="input-label">City</label>
              </div>

              <div id="state" className="input-div">
                <select id="state-select">
                  <option value="AL">AL</option>
                  <option value="AK">AK</option>
                  <option value="AS">AS</option>
                  <option value="AZ">AZ</option>
                  <option value="AR">AR</option>
                  <option value="CA">CA</option>
                  <option value="CO">CO</option>
                  <option value="CT">CT</option>
                  <option value="DE">DE</option>
                  <option value="DC">DC</option>
                  <option value="FM">FM</option>
                  <option value="FL">FL</option>
                  <option value="GA">GA</option>
                  <option value="GU">GU</option>
                  <option value="HI">HI</option>
                  <option value="ID">ID</option>
                  <option value="IL">IL</option>
                  <option value="IN">IN</option>
                  <option value="IA">IA</option>
                  <option value="KS">KS</option>
                  <option value="KY">KY</option>
                  <option value="LA">LA</option>
                  <option value="ME">ME</option>
                  <option value="MH">MH</option>
                  <option value="MD">MD</option>
                  <option value="MA">MA</option>
                  <option value="MI">MI</option>
                  <option value="MN">MN</option>
                  <option value="MS">MS</option>
                  <option value="MO">MO</option>
                  <option value="MT">MT</option>
                  <option value="NE">NE</option>
                  <option value="NV">NV</option>
                  <option value="NH">NH</option>
                  <option value="NJ">NJ</option>
                  <option value="NM">NM</option>
                  <option value="NY">NY</option>
                  <option value="NC">NC</option>
                  <option value="ND">ND</option>
                  <option value="MP">MP</option>
                  <option value="OH">OH</option>
                  <option value="OK">OK</option>
                  <option value="OR">OR</option>
                  <option value="PW">PW</option>
                  <option value="PA">PA</option>
                  <option value="PR">PR</option>
                  <option value="RI">RI</option>
                  <option value="SC">SC</option>
                  <option value="SD">SD</option>
                  <option value="TN">TN</option>
                  <option value="TX">TX</option>
                  <option value="UT">UT</option>
                  <option value="VT">VT</option>
                  <option value="VI">VI</option>
                  <option value="VA">VA</option>
                  <option value="WA">WA</option>
                  <option value="WV">WV</option>
                  <option value="WI">WI</option>
                  <option value="WY">WY</option>
                </select>
              </div>

            </div>

          </fieldset>

        </div>

        {/* Credit Card Information */}
        <div id="cart-body-right" className="cart-body">
        <h2>Credit Card Information</h2>
        <fieldset id="cc-fieldset">

        <div id="cc-number" className="input-div">
        <input type="number" placeholder="Credit Card Number" />
        </div>
        <div id="cc-valid" className="input-div-container">
        <div id="cc-expiration" className="input-div">
        <input type="text" placeholder="MM/YY" />
        </div>
        <div id="cc-cvv" className="input-div">
        <input type="text" placeholder="CVV"  />
        </div>
        <div id="cvv-help" className="input-div">
        <img height="18px" width="18px" src="store/img/question-mark.png" />
        </div>
        </div>
        </fieldset>

        <div id="cart-stats">
        <div className="stats">
        <span>cart total:</span>
        <span>something</span>
        </div>
        <div className="stats">
        <span>cart total:</span>
        <span>something</span>
        </div>
        <div className="stats">
        <span>cart total:</span>
        <span>something</span>
        </div>
        </div>

        <div id="terms-conditions">
        <div className="checkbox">
        <input type="checkbox" id="tc-checkbox" value="0" />
        <label htmlFor="tc-checkbox">Bla bla bla </label>
        </div>
        </div>

        </div>

        {/* Cart Footer */}

        <div className="cart-footer" id="cart-footer-left">
        <div id="coupon">
        <div id="coupon-input">
        <input type="text"/>
        </div>
        <div id="coupon-button">
        <button>hello</button>
        </div>
        </div>
        </div>

        <div className="cart-footer" id="cart-footer-right">

        </div>

        </div>
      </form>
    )
  }
}

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

:root {
  --gold: #e5cb51;
  --silver: #666666;
  --light-silver: #ddd;
}

::placeholder {
  color: var(--silver);
}

h2 {
  text-align: center;
  color: white;
  color: var(--light-silver);
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

body {
  background-color: black;
}

p {
  font-family: Raleway;
}

#cart {
  margin: auto;
  margin-top: 100px;
  width: 800px;
  display: grid;
  grid-template-areas:
    "h h"       /* Header */
    "bl br"     /* Body left right */
    "fl fr";    /* Footer left right */
}

#cart-header {
  background-color: black;
  border: 1.5px solid var(--gold);
  border-bottom: 0px;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  grid-area: h;
  display: flex;
  justify-content: center;
  padding: 1em 0;
}

#cart-body-left {
  grid-area: bl;
}

#cart-body-right {
  grid-area: br;
  border-left-width: 0;
}

#cart-footer-left {
  grid-area: fl;
  border-bottom-left-radius: 1em;
}

#cart-footer-right {
  grid-area: fr;
  border-bottom-right-radius: 1em;
}

.cart-body {
  width: 400px;
  height: 400px;
  border: 1.5px solid var(--gold);
  background-color: black;
}

.cart-footer {
  height: 50px;
  width: 400px;
  background-color: var(--gold);
}

#email {
  box-sizing: border-box;
  padding-bottom: 1em;
}

#number {
  box-sizing: border-box;
}

#state > select{
  height: 100%;
  border: 1.5px var(--silver) solid;
  border-radius: 3px;
}

#cc-paypal-option {
  padding-left: 50%;
  margin: 1em;
  border: 1px solid white;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  padding-bottom: 1em;
}

#cc-paypal-option > button {
  height: 31px;
}

#cart-stats {
  margin: 1em;
  border: 1.5px var(--gold) solid;
  border-radius: .5em;
}

#cart-stats > div:nth-child(2) {
  border-top: 1px var(--gold) solid;
  border-bottom: 1px var(--gold) solid;
  padding: .5em 0;
  margin: .5em 0;
}

#coupon {
  height: 40px;
  width: 300px;
  margin: 5px 50px;
  background-color: black;
  display: flex;
}

#coupon > div {
  width: 200px;
  position: relative;
}

#coupon-input input {
  position: absolute;
  height: 100%;
  right: 0;
  width: 0;
  opacity: 1;
  transition: all .2s ease-in;
}

#coupon-button button {
  height: 100%;
}

#cart-footer-left:hover input[type="text"] {
  width: 100px;
  opacity: 1;
  transition: all .2s ease-out;
}

.header-line {
  width: 75px;
  height: 0px;
  border: 1px solid var(--gold);
  margin: auto 0;
  background-color: var(--gold);
}

.header-icon {
  height: 2em;
  width: 120px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  margin: .5em 0px;
  padding-top: .1em;
}

.active-icon {}

.header-icon:hover {
  background-color: var(--gold);
}

.header-icon:hover > p{
  color: black;
}

.header-icon > p {
  text-align: center;
  color: var(--light-silver);
  font-weight: bold;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1.2em;
  letter-spacing: 2px;
  line-height: 1.45;
}

.input-label {
  visibility: visible;
  position: absolute;
  display: block;
  color: white;
  top: 0;
  font-size: 1em;
  opacity: 1;
  transform: translateY(-1.5em);
  transition: all 0.2s ease-out;
  margin-left: 10px;
  display: inline;
}

input:placeholder-shown + label {
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transform: translateY(.5em);
}

.input-div-container {
  display: flex;
}

.input-div {
  position: relative;
  padding: 1em;

  /* height: 33px; */
}

/* #first-name,
#last-name {
  width: 198.5px;
} */

.input-div > input {
  width: 100%;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1.5px var(--silver) solid;

  display: block;
}

.input-div > input:focus, #state > select:focus {
  outline: none;
  border: solid var(--gold) 1.5px;
  box-shadow: 0 0 5px var(--gold);
}

.stats {
  margin: .5em;
  display: flex;
  justify-content: center;
}

.stats > span {
  padding: 0 1em;
  color: var(--light-silver);
}

.checkbox {
  position: relative;
  margin: 1em;
  margin-top: 1.3em;
}

.checkbox input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.checkbox label::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  background-color: white;
  content: '';
}

.checkbox input[type="checkbox"]:checked + label::before {
  background-color: var(--gold);
  color: white;
}

.checkbox input[type="checkbox"]:checked + label::after {
  display: block;
  position: absolute;
  top: 1px;
  left: 8.5px;
  width: 10px;
  height: 20px;
  /* background: black; */
  border: solid black;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  content: '';
}

@media screen and (max-width: 900px) {
  #cart {
    width: 400px;
    display: grid;
    grid-template-areas:
      "h"
      "bl"
      "fl"
      "br"
      "fr";
  }

  #cart-header {
    width: 400px;
  }

  .header-icon {
    width: 75px;
  }

  .header-icon p {
    font-size: .7em;
    letter-spacing: 2px;
    line-height: 2.5;
  }

  #cart-body-right {
    border-left-width: 1.5px;
  }

  #cart-footer-left {
    border-radius: 0px;
  }

  #cart-footer-right {
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

Here is how it looks like when I render it without react

How it looks like after I paste my code into jsx

I hope I have provided enough code and if not I can add on to it

Answer 1

I'm not sure this is a react specific issue. I pasted your code into JSFiddle and did not run into the same issues you are having. Positioned elements will only default to root if there are no other positioned ancestors. Might be worth looking through your HTML to see if there is a positioned parent or ancestor messing with your positioning.