Color of Stacked Semi-Transparent Boxes Depends on Order

Color of stacked semi-transparent boxes depends on order?

Simply because in both cases the combination of colors is not the same due to how opacity of the top layer affect the color of the bottom layer.

For the first case, you see 50% of blue and 50% of transparent in the top layer. Through the transparent part, you see 50% of red color in the bottom layer (so we only see 25% of red in total). Same logic for the second case (50% of red and 25% of blue); thus you will see different colors because for both cases we don't have the same proportion.

To avoid this you need to have the same proportion for both your colors.

Here is an example to better illustrate and show how we can obtain same color:

In the top layer (the inner span) we have 0.25 of opacity (so we have 25% of the first color and 75% of transparent) then for the bottom layer (the outer span) we have 0.333 opacity (so we have 1/3 of 75% = 25% of the color and the remaining is transparent). We have the same proportion in both layers (25%) so we see the same color even if we reverse the order of layers.

.a {  background-color: rgba(255, 0, 0, 0.333)}
.b {  background-color: rgba(0, 0, 255, 0.333)}
.a > .b {  background-color: rgba(0, 0, 255, 0.25)}.b > .a {  background-color: rgba(255, 0, 0, 0.25)}

<span class="a"><span class="b">          Color 1</span></span><span class="b"><span class="a">Different Color 2</span></span>

Why is the button colour being affected by the background?

The opacity of #parent is 30% so it and everything inside it is translucent.

If you wanted to set the background of #parent to be translucent, then use a background-color with an alpha channel, don't use opacity.

CSS: Where have the margins and paddings it's background-color from?

It is being defined in the css here:

header,main,nav,article,aside,footer {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.5em;
  margin-bottom: 0.5em;
}

For example with the structure with the nav being encolsed in the header:

<header>
<a href="#">
    Logo – Beschreibung
</a>

<nav>
  Navigation
</nav>
</header>

Your header and your nav are inheriting from the same css class which background color has an opacity setting: background-color: rgba(0, 0, 0, 0.2);

Html elements do not get laid inset, they are stacked on top of each other.

As the items are stacked and inherit, it gives the item darker shades as opacity as they stacked on each other.

Don't think of the elements on the page as some flat structure. An abstract example would be to think would be:

Say you have a piece of paper on a desk with some writing on it. You also have two pieces of glass that are tinted yellow, one slightly smaller than the other. Put one piece of yellow glass down over the paper and it turns from white to slightly yellow. Put the slightly smaller piece of glass on top of that glass. Now, where ever there is two panes of glass, it is even darker yellow.

That is essentially what you are doing with css here.

The body element is the paper which is defined as green: background-color: green;

The header is the next layer you are placing down and it is semi transparent (because you are telling it to have opacity with the last param in the rgba background-color: rgba(0, 0, 0, 0.2);) so you get a tinted color wherever the header overlays on top of the body.

Now you have another element you are placing inside the header. It has its own margins so it doesn't cover up the entire header completely. So you place the nav item inside the header. Per css it also has a background color with opacity background-color: rgba(0, 0, 0, 0.2) so it will cause that area to be even darker.

How can I add a semi-transparent rectangular background behind the survey form?

You can simply use a .container and give it a background color. Please see the changes I made to your code. For the other image, you can set a background-image to your body.

body {
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: center;
  width: 100vw;
  height: 100vh;
  background-image: url('https://cdn.wallpapersafari.com/53/62/l6bruO.jpg');
  background-repeat: repeat-y;
  background-size: cover;
}

#description {
  font-style: italic;
}

.one-line {
  display: block;
  padding: 10px 0px 5px 0px;
}

.form-control {
  width: 500px;  
}

#dropdown {
  width: 510px;
}

label {
  font-size: 20px;
}

#submit {
  margin: 10px;
}

.container {
  width: 1000px;
  height: 600px;
  background-color: red;
}

<body id="body">
 <div class="container">
  <h1 id="title" class="text-center">Jollibee Order Form</h1>
  <p id="description" class="text-center">Welcome to Jollibee's 
  order form! Hot, fresh, & juicy food all day long!</p>

  <form id="survey-form">
    <div>
      <label id="name-label" class="one-line">Name</label>
      <input type="text" id="name" placeholder="Enter your name" required class="form-control"/>
    </div>
    
    <div>
      <label id="email-label" class="one-line">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required class="form-control"/>
    </div>
  
    <div>
      <label id="number-label" class="one-line">Age</label>
      <input type="number" id="number" min="10" max="100" placeholder="Enter your age" required class="form-control"/>
    </div>
    
    <div>
      <label class="one-line">Main</label>
      <select name="options" id="dropdown" class="form-control">
        <option value="option 1">Jolly Crispy Fried Chicken               (spicy)
        </option>
        <option value="option 2">Jolly Crispy Fried Chicken
        (regular)
        </option>
        <option value="option 3">Original Chicken Sandwich                 </option>
        <option value="option 4">Spicy Fried Chicken 
        Sandwich</option>
        <option value="Jolly Spaghetti">Jolly Spaghetti</option>
      </select>
    </div>
    
    <div>
      <label class="one-line">Drink</label>
      <input type="radio" name="radio buttons" value="radio   
      1"/>Pineapple Quencher
      <input type="radio" name="radio buttons" value="radio   
      2"/>Water
    </div>
    
    <div>
      <label class="one-line">Pie</label>
      <input type="checkbox" value="checkbox 1"/>Banana Langka Pie
      <input type="checkbox" value="checkbox 2"/>Peach Mango Pie
    </div>
    
    <div>
      <label class="one-line">Special order notes?</label>
      <textarea class="form-control"></textarea>
    </div>
    
    <input type="submit" id="submit" class="form-control"/>
  </form>
  </div>
</body>

Why does a CSS linear-gradient from color1 to color2 render exactly the same as a linear-gradient from color1 to transparent on a color2 background?

You have a mistake in your conclusion. The interpolation of the second gradient will give a center coloration of (255, 0, 0, 0.5) and not (127.5, 0, 0, 0.5)

and (255, 0, 0, 0.5) on the top of (0, 0, 255, 1) will give (127.5, 0, 127.5)

    255*0.5 + 0*(1 - 0.5) = 127.5
    0*0.5   + 0*(1 - 0.5) = 0 
    0*0.5   + 255*(1 - 0.5) = 127.5

More details around the math here: Color of stacked semi-transparent boxes depends on order?

Color of Stacked Semi-Transparent Boxes Depends on Order