CSS example not working correctly

html - test1.html:


CSS - test1.css:
.box-orange { // without any position declaration
background: orange;
height: 100px;
width: 100px;

.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static; // Declared as static

Above is not working. Only blue box is getting displayed. Orange box is not getting displayed on both chrome & mozilla firefox browsers. What is the problem?


If you have a link to the problem to the curriculum or some viewer to the rest of your code, please don’t forget to add that link. I think it would be beneficial to have the html as well.

It is the complete code. It was just for study purpose. Above code was there on - https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/

Well I can say with certainty, the author forgot that there are no inline comments, get rid of the inline comments in the css. It should work then.

It works by adding display: inline; & display: inline-block;


But just fyi, CSS doesn’t have inline comments (the ones that are //)
They have block comments. Just be aware.