There are two display values: block and inline
A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as necessary
The <div> element is a block-level and is often used as a container for other HTML elements
The <span> element is an inline container used to mark up a part of a text, or a part of a document

HTML Tags

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

Note: If we try to define inline element's width & height, it cannot receive and display it because it is in inline. And it will not take margin-top and margin-bottom also.

If we want an inline elements will work like a block element in a line then

display: inline-block;

border-image-slice

The border-image property allows you to specify an image to be used as the border around an element.

The border-image property is a shorthand property for:

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

The above diagram illustrates the location of each region.

Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword fill is set.

The border-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to form the final border image.

PSEUDO Class Hover, Class Hover, Visited, Focus<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1:hover { color: skyblue; background-color: seagreen; font-size: 50px; font-weight: 700; } .middle:focus { color: blue; font-weight: 700; } a:visited { color: red; } </style> </head> <body> <h1>This is normal</h1> <input type="text"> <input class="middle" type="text"> <input type="text"> <br> <a href="google.com">Google e jao</a> <a href="underconsideration.com/brandnew">Never visited</a> <a href="web.programming-hero.com">Programming Hero te jao</a> </body> </html>

First Child, nth child, pseudo element before after

<style>

li:first-child {
            color: chocolate;
        }

        li:last-child {
            background-color: blueviolet;
        }

        li:nth-child(2n) {
            color: crimson;
        }

        li:nth-child(2n+1) {
            background-color: aqua;
        }

        h3::before {
            content: 'Hello ';
        }

        h3::after {
            content: "  How are you?";
            background-color: aquamarine;
            font-size: 30px;
        }

</style>

<body>

<h3>middle size header - 1</h3> <h3>middle size header - 2</h3> <h3>middle size header - 3</h3> <h3>middle size header - 4</h3> <h3>middle size header - 5</h3> <h3>middle size header - 6</h3> <ul> <li>Alia</li> <li>Dalia</li> <li>Kalia</li> <li>Calia</li> <li>Jalia</li> <li>Charia</li> <li>Maria</li> <li>Koli</li> <li>Hafiza</li> </ul> </body>

Position static relative absolute fixed sticky z-index

relative is for defining relative position

when we use relative then top, bottom, left, right can be defined from the current position

but when we use absolute then top, bottom, left, right can be defined from the parent element's position if the parent position is not defined earlier

fixed defined the fixed position wherever anything else is.

Sticky is defined for sticky position under his parent's element's place.

z-index is for to set which one will sit on top of an object

Code:

<style>
        .swimming div {
            border: 1px dashed palevioletred;
            width: 200px;
        }

        #boy {
            position: relative;
            top: 75px;
            z-index: 20;
        }

        #ring {
            position: relative;
            z-index: 10;
        }

        #water {
            position: relative;
            top: -75px;
        }

        .dummy {
            width: 250px;
            height: 150px;
            background-color: pink;
        }
    </style>

<section>
        <h1>This is my header</h1>
        <h1>I am learning position</h1>
        <h1>I have a higher position</h1>
    </section>

    <section class="swimming">
        <div id="boy"><img src="images/boy.svg" alt=""></div>
        <div id="ring"><img src="images/ring.svg" alt=""></div>
        <div id="water"><img src="images/water.svg" alt=""></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
    </section>

    <section>
        <h1>This is separate</h1>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
        <div class="dummy"></div>
    </section>

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

static
relative
fixed
absolute
sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This <div> element has position: static;

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Here is a simple example:

This <div> element has position: relative;This <div> element has position: absolute;

Here is the CSS that is used:

Example

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Example

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

CSS Box Model, Pseudo Class, Position

The <div> Element

The <span> Element

HTML Tags

border-image-slice

The position Property

position: static;

position: relative;

position: fixed;

position: absolute;

Example

position: sticky;

Example