CSS example not working correctly

HTML-CSS
1

html - test1.html:

position

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?

2

Hi,

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.

3

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/

4

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.

5

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

6

Alright.

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