CSS Box Model, Layout, and Positioning

1. CSS Box Model Components

The CSS Box Model consists of the following components:

• Content: The actual content of the element.
• Padding: The space inside the border, between the content and the border.
• Border: The line wrapping the padding and content.
• Margin: The space outside the border, separating the element from others.

Example of the Box Model

                              
                      .box {
                        width: 200px;
                        height: 100px;
                        padding: 20px;
                        border: 5px solid blue;
                        margin: 30px;
                        background-color: lightyellow;
                      }
                              
                          

Copy Code

Output:

2. Box-sizing Property

The box-sizing property defines how width and height are calculated.

• content-box: The width and height apply only to the content area.
• border-box: The width and height include content, padding, and border.

Example with box-sizing

                              
                      .box {
                        width: 200px;
                        height: 100px;
                        padding: 20px;
                        border: 5px solid blue;
                        margin: 30px;
                        box-sizing: border-box;
                      }
                              
                          

Copy Code

3. Display Property

The display property determines how an element is displayed in the layout.

• block: The element takes the full width of its container.
• inline: The element takes only as much width as its content.
• inline-block: Behaves like inline, but can have width and height.
• none: Removes the element from the layout flow.

Example with Display

                              
                      .block-element {
                        display: block;
                        width: 200px;
                        background-color: lightblue;
                      }
                      
                      .inline-element {
                        display: inline;
                        background-color: lightcoral;
                      }
                      
                      .inline-block-element {
                        display: inline-block;
                        width: 100px;
                        height: 50px;
                        margin: 10px;
                        background-color: lightgreen;
                      }
                              
                          

Copy Code

Output:

4. Positioning

The position property controls the positioning of elements.

• static: Default positioning, according to the document flow.
• relative: Positioned relative to its original position.
• absolute: Positioned relative to its nearest positioned ancestor.
• fixed: Positioned relative to the viewport and doesn't scroll.
• sticky: Behaves like relative until a certain scroll point, then acts as fixed.

Example with Positioning

                              
                      .relative {
                        position: relative;
                        top: 20px;
                        left: 30px;
                        background-color: lightblue;
                      }
                      
                      .absolute {
                        position: absolute;
                        top: 50px;
                        left: 100px;
                        background-color: lightcoral;
                      }
                      
                      .fixed {
                        position: fixed;
                        top: 10px;
                        right: 10px;
                        background-color: lightgreen;
                      }
                      
                      .sticky {
                        position: sticky;
                        top: 0;
                        background-color: lightyellow;
                      }
                              
                          

Copy Code

5. Z-index and Stacking Context

The z-index property controls the stacking order of elements when they overlap.

Example with Z-index

                              
                      .element1 {
                        position: relative;
                        z-index: 1;
                        background-color: lightblue;
                        width: 200px;
                        height: 100px;
                      }
                      
                      .element2 {
                        position: absolute;
                        z-index: 2;
                        background-color: lightcoral;
                        width: 200px;
                        height: 100px;
                        top: 20px;
                        left: 20px;
                      }
                      
                      .element3 {
                        position: absolute;
                        z-index: 3;
                        background-color: lightgreen;
                        width: 200px;
                        height: 100px;
                        top: 40px;
                        left: 40px;
                      }
                              
                          

Copy Code

Output: