"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

CSS Positioning and Display

 

Understanding CSS positioning and display properties is essential for controlling the layout and flow of elements on a webpage. These properties allow developers to arrange content exactly how they want, whether it’s a simple static page or a complex interactive design.

CSS Positioning

CSS positioning determines how an element is placed in the document. There are several position values, each with unique behavior:

  • Static (default)
    Elements are positioned according to the normal flow of the page. They appear one after another as the HTML is structured.
  • Relative
    The element is positioned relative to its normal position. You can use     top, right, bottom, and left to shift it without affecting other elements.
  • Absolute
    The element is removed from the normal flow and positioned relative to its closest positioned ancestor (an ancestor with     position other than static). It does not affect other elements.
  • Fixed
    The element is positioned relative to the viewport and stays fixed in place even when the page is scrolled.
  • Sticky
    The element toggles between relative and fixed based on the scroll position. It behaves like     relative until a defined scroll point, then behaves like fixed.

CSS Display

The display property controls how an element is rendered on the page and how it interacts with other elements. Common display values include:

  • block
    The element takes up the full width available, starting on a new line. Examples:     <div>, <p>
  • inline
    The element only takes up as much width as necessary and flows within text. Examples:     <span>, <a>
  • inline-block
    Combines features of both block and inline. The element flows inline but respects width and height properties.
  • none
    The element is completely removed from the layout and not displayed.
  • flex
    Turns the container into a flexbox, allowing easy arrangement of child elements in rows or columns with powerful alignment and spacing options.
  • grid
    Enables grid layout, dividing the container into rows and columns for two-dimensional layout control.

 

Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more