Position and Selector

• Link to Position and Selector
• http://laibobbie.aisites.com/mm2203/positionANDselector.html
•  
• Combine selector applied to h1, h2,h3 to make:

font-style:italic;
align-text:center;
padding:10px;
margin:5px;
BUT NOT the p.

Container: blue 300px,
Absolute: Red dotted border,
Relative; green  border,
Fixed : purple border and
Static yellow.
The above are code sequences.

See explanation about positions below by referring to the figure on the left.

1. Absolute box with 5px for top and 10px for left margins. This box is out of the flow but stay within Container and will remain with the same position disregard in the code it was coded to float towards the right. This indicate that the absolute is not following the normal flow even it was commanded it to float to the right.
2. Relative box flows coordinating to parent it belongs to. In this case, it is the of container. It was set to float towards the right of the Container. The width of Relative was 200px while Absolute" was 150px There is an overlap area between the boxes of absolute and relative because the total width had exceeded the width of the container.
3. Fixed box follows the flow after the Relative box. It has the padding of 30px around it. The top margin was set to 30px while rest of margins were 0. The top margin was measured from the container. It floats to the left. Since Absolute box is not following the flow, the Fixed box is overlapping with the Absolute box.
4. Static box also follows the normal flow. It was set to float to the right without margins. Because the size of the box (150px) is smaller than the width left by the Fixed box (300px - 100px=200px), therefore the position is on the right side of the Fixed box. However, the top margin was set to 0, therefore, the top align to the previous vertical element which is the Relative box right above it.
5. The Container which suppose to hold all these boxes are colored as blue. It has a width of 300px, but no height was declared. You can see the Absolute and Fix boxes had went overlapping the boxes in the container but would not exceed the size horizontally. We can see how Fix and Absolute react. Static and Relative stay within the parent box but not for Absolute and Fixed positions if they are taller than other boxes in the container. In this case, the Fixed box has demonstrated that. When you scroll the screen veritically, you see the Fixed box goes with you.