The `position` property in CSS

The `position` property in CSS is used to specify the positioning type of an element. There are four main positioning types:


1. `position: static;`

This is the default value. 

Elements with `position: static;` are positioned according to the normal flow of the document. 

The `top`, `right`, `bottom`, `left`, and `z-index` properties have no effect on statically positioned elements.


2. `position: relative;`

Elements with `position: relative;` are positioned relative to their normal position in the document flow. 

When you use `position: relative;`, you can move the element from its normal position using the offset properties (`top`, `right`, `bottom`, `left`). 

However, it will still occupy space in the document flow, and nearby elements will behave as if the element has not been moved.


3. ' position: absolute; '

Elements with `position: absolute;` are positioned relative to their nearest positioned ancestor (an ancestor element with a position other than `static`). 

If there is no such ancestor, they are positioned relative to the initial containing block (usually the `<html>` element). 

Absolutely positioned elements are removed from the normal document flow and do not affect the layout of other elements.


4. `position: fixed;`

Elements with `position: fixed;` are positioned relative to the browser window viewport, regardless of scrolling. 

They do not move when the page is scrolled and remain in the same position even if the parent element is scrolled. 

Like absolutely positioned elements, fixed-positioned elements are removed from the normal document flow.


Example demonstrating the usage of each positioning type:

    

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Types Example</title>
<style>
/* Apply different positioning types to elements */
.static {
    position: static;
    background-color: lightblue;
}

.relative {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: lightgreen;
}

.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: lightcoral;
}

.fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: lightsalmon;
}

/* Additional styles for demonstration */
.container {
    margin-bottom: 200px;
}
</style>
</head>
<body>

<div class="container">
    <div class="static">Static Positioning</div>
    <div class="relative">Relative Positioning</div>
    <div class="absolute">Absolute Positioning</div>
</div>

<div class="fixed">Fixed Positioning</div>

</body>
</html>



In this example:

- The first three `<div>` elements demonstrate `position: static;`, `position: relative;`, and `position: absolute;` positioning types within a container with scrolling.

- The fourth `<div>` element demonstrates `position: fixed;` positioning, which remains fixed relative to the viewport even when scrolling.

Comments

Post a Comment

Write something to CodeWithAbdur!

Popular posts from this blog

Quotation marks to wrap an element in HTML

In HTML, quotation marks can be used to wrap an element, providing visual emphasis and indicating that the enclosed content represents a quotation.  This styling technique enhances the presentation of quoted text on web pages. Setting default quotation marks: To set quotation marks to wrap an element in HTML, you can use the `quotes` CSS property along with the `content` property to specify the quotation marks to be used (the below example uses the default quotes value, so it is not mentioned as can be seen). Here's how it can be achieved: /* Define the quotation marks */ .q:before { content: open-quote; } .q:after { content: close-quote; } In this CSS: - `open-quote` represents the opening quotation mark. - `close-quote` represents the closing quotation mark. Now, you can apply the `.q` class to elements where you want to set quotation marks: <p class="q">This is a quoted text.</p> This will render as: “ This is a quoted
Read more

The Basic Structure of a Full-Stack Web App

A basic structure of a full-stack web application typically consists of three main components: the front end, the back end, and the database.  Each component serves a specific role in the application's architecture. Here's an overview of the basic structure: Front End: The front end is the user-facing part of the application that users interact with directly. It's responsible for presenting data to users, collecting user input, and providing a user-friendly interface. Common technologies used in the front end include HTML, CSS, and JavaScript. Front-end frameworks and libraries like React, Angular, or Vue.js are often used to build interactive and dynamic user interfaces. Basic Components of the Front End: User Interface (UI) Components User Input Forms Display of Data Interaction Logic (JavaScript) Back End: The back end is the server-side portion of the application responsible for handling business logic, data processing, and serving data to the front end. It communicates
Read more

Unlocking Web Design: A Guide to Mastering CSS Layout Modes

In CSS, layout modes define how various elements are positioned and arranged on the webpage. Several different layout modes exist, each with its own strengths and weaknesses. Here's a breakdown of the most common ones: 1. Normal Flow: This is the default layout mode for all elements. Elements stack vertically, one after the other, based on the document's flow. Block elements (like paragraphs and headings) occupy the full width of their container, while inline elements (like text and images) flow along the same line. Offers control over element sizes and margins but can be inflexible for complex layouts. 2. Floats: Allows elements to "float" to the left or right of the text flow. Useful for creating sidebars, wrapping text around images, or other basic layout adjustments. Can be tricky to manage and lead to overlapping content or layout instability. 3. Positioning: Offers precise control over the position of elements on the page. You can specify exact coordinates or us
Read more