Web_Dev_Grad

Two of the more important concepts in CSS are display and positioning, enabling developers to control the behaviour, layout, and positioning of elements on a web page. Understanding how to effectively use display and positioning properties allows you to create layouts that are not only functional but also visually appealing.

The display property in CSS defines how an element should be displayed on the page. It determines whether an element behaves as a block-level element, an inline element, or something else entirely. The display property can be used to control the layout of an element and its interaction with neighbouring elements. The values that the display property can take are block, inline, inline-block, or none.

Block-Level Elements

Block-level elements create a box that extends the full width of their parent container. These elements start on a new line and occupy the full width of their container. Common examples of block-level elements include <div>, <p>, <h1>, <ul>, and <section>. The primary characteristic of block-level elements is that they push other elements below them, occupying the full horizontal space available.

<div>This is a block-level element.</div><div>This is another block-level element.</div>

/*This is set by default*
div {
    display:block;
}

In the code above, the <div> element will create a block that spans the entire width of its parent element and thus the second <div> will appear on the next line. To set an element as a block if it is not one by default use display: block;.

Block-level elements prevent other elements from appearing in the same horizontal space. This is one of the key differences between block-level elements and inline elements, which allow multiple elements to coexist on the same line.

Inline Elements

Inline elements, on the other hand, do not start on a new line. They only take up as much width as necessary and allow other inline elements to sit next to them horizontally. Examples of inline elements include <span>, <a>, <strong>, and <em>.

<p>
    This is an inline <span>element</span> inside a paragraph.
</p>

/*This is set by default*/
span {
    display:inline;
}

In this case, the <span> element will not start on a new line but will instead flow within the paragraph, taking up only as much space as required. To set an element as inline if it is not one by default use display: inline;.

Inline-Block Elements

inline-block is a hybrid between block and inline elements. It allows the element to behave like a block-level element but remain inline with other elements. The element retains its block-level behaviour (it can have width and height), but it will stay on the same line as other elements.

<div class="inline-div">Div1</div><div class="inline-div">Div2</div><div class="inline-div">Div3</div>

.inline-div {
    display: inline-block;
    width: 100px;
    height: 100px;
}

Here, all three <div> elements are aligned horizontally, but each retains block-like properties, such as having specific width and height. To set an element as an inline-block if it is not one by default use display: inline-block;.

None

To completely remove an element from the page, set the display to none. This is useful in conjunction with media queries to remove an element under or above a certain screen size. To set an element as inline if it is not one by default use: display: none;.

Positioning properties in CSS allow you to control the position of an element relative to its normal position or to other elements on the page. These properties give you fine-grained control over where and how elements are placed, making it an essential part of layout design.

Static

By default, all elements have a position value of static. This means they are positioned according to the normal document flow. Elements with position: static will not be affected by the top, right, bottom, or left properties. They are placed where they would normally appear in the document, with no changes in their position.

div {
    position: static;
}

In most cases, you don't need to explicitly declare position: static; since it's the default value. Elements with position: static; will simply flow in the document, stacking one on top of the other.

Relative

When you set an element's position to relative, it remains in the normal flow of the document, but you can offset it from its normal position using the top, bottom, left, and right properties. The offset values move the element relative to where it would normally appear from these sides, without affecting the positioning of other elements.

.box2 {
    position: relative;
    left: 100px;
    bottom: 50px;
}

In this case, .box2 will be moved 100px to the right (from the left) and 50px up (from the bottom) from its default position. It still occupies space in the document, so other elements will not overlap it. If you have some boxes one under the other, you can make one of the boxes appear to the right of the box above you would have to:

• Make display: relative;
• Make top: the negative of the height of the box to moves it up fully
• Make left: the width of the first box it has to go next to, so it is shifted from the left fully

Absolute

With position: absolute; an element is removed from the normal document flow. It is positioned relative to its closest positioned ancestor (an element with position: relative, absolute, or fixed), or the initial containing block (usually the <html> or <body> element) if no positioned ancestor exists. Elements with position: absolute don't affect the layout of other elements, and they are free to be placed anywhere within their containing element using the top, bottom, left, and right properties.

.container {
    position: relative;
    height: 200px;
}
.box {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 100px;
    height: 100px;
}

In this example (where .box is a child of .container), .box will be positioned 20px down and 30px from the left of the .container element. Since the .box is absolutely positioned, it will not affect the layout of other elements, and its position is determined by its closest positioned ancestor (.container). It is worth noting that .container has position: relative; so that it is the closest positioned relative of .box.

Fixed

The position: fixed; declaration positions an element relative to the viewport, meaning it will remain in a fixed position on the screen even when the user scrolls. This is often used for elements such as sticky navigation bars that should stay in place as the user scrolls down the page or for “scroll-to-top” buttons.

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

In this case, the header element will stay at the top of the page, even when the user scrolls down.

Sticky

position: sticky; is a relatively new CSS feature that combines the behaviour of both relative and fixed positioning. An element with position: sticky; behaves like a relatively positioned element until the user scrolls past it, at which point it becomes fixed to the viewport. It “sticks” to a specific position once the user scrolls past the defined threshold.

It works very well for a <nav> element to stay in its normal flow until the user scrolls down, at which point it will stick to the top of the viewport. This is especially useful for navigation bars that you want to remain visible but not block content when they are out of view.

nav {
    position: sticky;
    top: 0;
}

Offset

Offset properties (top, right, bottom, and left) allow you to move an element away from its default position or from a position relative to a parent element.

• top: Moves an element down from its original position.
• bottom: Moves an element up from the bottom of its container.
• left: Moves an element away from the left edge of its container.
• right: Moves an element away from the right edge of its container.

These properties are often used in combination with position: relative, absolute, fixed, or sticky to precisely position elements on the page.

The vertical-align CSS property is used to align inline or inline-block elements vertically relative to their surrounding elements. It's particularly useful in situations where you want to fine-tune the positioning of elements that are in-line with text or other elements. Here are common scenarios where you can use vertical-align.

Aligning Text and Inline Elements

The most common use of vertical-align is to align inline elements, such as images, with text. By default, inline elements are aligned to the baseline of the parent element, but you can adjust their position relative to the text.

<p>Here is an image <img src="image.jpg" style="vertical-align: middle;"> and some text.</p>

In this example, the image will be aligned vertically in the middle of the surrounding text.

Aligning Inline-Block Elements

If you have inline-block elements (such as <button>, <div>, or <img>) and you want to control their vertical alignment relative to other inline-block elements or text, you can use vertical-align.

<div style="display: inline-block; vertical-align: top;">Item 1</div>
<div style="display: inline-block; vertical-align: bottom;">Item 2</div>

In this example:

• Item 1 will align at the top of the line height.
• Item 2 will align at the bottom of the line height.

Centering an Inline Element Vertically

If you want to centre an inline element vertically within a line height, you can use vertical-align: middle; or adjust other values like top or bottom.

<p style="line-height: 50px;">
    This is some text <span style="vertical-align: middle;">centred text</span> in a paragraph.
</p>

In this case, the span containing "centred text" will be aligned vertically in the middle of the line height, creating the effect of vertical centring.

Align Table Cells

vertical-align is frequently used in table layouts to control how content is aligned within table cells (<td> or <th>). By default, content is aligned at the bottom of a table cell, but you can change it to top, middle, or bottom using vertical-align.

<table>
    <tr>
        <td style="vertical-align: top;">Top Aligned</td>
        <td style="vertical-align: middle;">Middle Aligned</td>
        <td style="vertical-align: bottom;">Bottom Aligned</td>
    </tr>
</table>

This will control the alignment of the content inside each cell relative to the height of the cell.

Common Vertical Align Values

• baseline aligns the element to the baseline of the parent.
• top aligns the element to the top of the parent.
• middle aligns the element to the middle of the line height.
• bottom aligns the element to the bottom of the parent.
• text-top aligns the top of the element with the top of the parent's font.
• text-bottom aligns the bottom of the element with the bottom of the parent's font.

When Not to Use Vertical Align

Flexbox and Grid Layouts: These layout systems provide more flexible and robust alignment controls, so vertical-align is not usually necessary.

Block-level Elements: vertical-align only works with inline or inline-block elements, so it won't have an effect on block-level elements like <div> by default.