The very first point, on absolute positioning is not quite right, or maybe it just seems like it due to the language you’ve used?

Use top, right, bottom and left, accompanied by a pixel value to control where an element stays.

position:absolute;
top:20px;
right:20px

The CSS above sets the position of an element to stay 20px from the top and right edges of your browser.

It sets the absolute position of the element within the document. In your example, on page load, the top-right corner of the document aligns with the top-right corner of the browser viewport. As soon as you scroll down 20px, that element will start disappearing from view. You might want to change where you’ve written “stay” to say “start”.

http://codepen.io/adamazing/pen/YGmbwg

To actually fix the position of the element relative to the browser viewport, use position: fixed.

The second example, for the * selector, is also a bit wonky.

For example, if you used *p and then added CSS styles to that, it would do it to all elements in your document with a <p> tag.

If you want to target all <p> elements, just use the selector “p”:

p {
color: red;
}

The * in your example is redundant; * p is exactly the same as p, even down to the specificity. I’ve rarely, if ever, had cause to use the * selector but a better example would be, removing margin and padding from all elements inside a class, maybe? E.g.

.example * {
padding: 0;
margin: 0;
}

I’m a Software Developer at Shuttlerock where I write mostly Ruby and Typescript. I also dabble in any language that takes my fancy.

I’m a Software Developer at Shuttlerock where I write mostly Ruby and Typescript. I also dabble in any language that takes my fancy.