#csscode

Positioning: Static, Relative, Absolute, Fixed, Sticky

Positioning of different types of box models in HTML web page is controlled by applying position to the element using CSS. Different CSS box model positioning attributes in HTML web page provide you control over how and where to place web page content element information in the box model, where the web developer decides how to display web page elements in the web page and how to manipulate or control the existing web page elements with other elements. Here by default, you get five types of box model positioning. In which, static box model position, relative box model position, absolute box model position, fixed box model, and sticky box model, position are the major box model positions.

Static box model positioning in CSS.

CSS static box model positioning in HTML web page displays all the digital content in the web page by aligning it in the default positioning. This previews web elements in your web page as a normal document box. By default, static box model positioning in a web page has no significant effect on the top, bottom, left, and right box model attributes.

Static box model example in an HTML web page.

.boxmodel-static {

width: 300px;

height: 140px;

background-color: teal;

}

Relative box model positioning in CSS.

CSS Relative box model positioning in an HTML web page displays web elements in a document relative position in a box model document.

Whereas normally relative box model positioning will preview the top, bottom, left, and right box model properties in an offset order.

Relative box model example in an HTML web page.

.boxmodel-relative {

position: relative;

width: 400px;

height: 200px;

background-color: yellow;

top: 30px; /* it displays box model 20px down from top position */

left: 20px; /* it moves active box model 20px from left position to right direction */

}

Absolute box model positioning in CSS.

CSS Absolute Box Model Positioning Web page elements in an existing HTML web page are displayed at positions other than the nearest absolute position (static position) relative to the existing box model. While absolute box models preview in absolute position order with proper margins and alignment, sometimes absolute box models preview web page elements with exact dimensions. Absolute box model web page document display does not disturb or manipulate other elements.

Absolute box model example in an HTML web page.

.boxmodel-absolute {

position: absolute;

width: 200px;

height: 130px;

background-color: pink;

top: 70px; /* it moves 70px box model form top position */

left: 40px; /* it moves box model content 40px from the left direction */

}

Fixed box model positioning in CSS.

In the current HTML web page, CSS fixed box model positioning previews the web page element at a relative position to the viewport. So that, this fixed box model is displayed at the same place even when the web page is scrolled in the current web page.

Whereas in box model fixed position, it is removed from the normal web page document preview.

Positioning: Static, Relative, Absolute, Fixed, Sticky In Hindi

एचटीएमएल वेब पेज में सीएसएस का उपयोग कर विभिन्न प्रकार के बॉक्स मॉडल के पोजिशनिंग एलिमेंट को पोजीशन अप्लाई कर कण्ट्रोल किया जाता है। एचटीएमएल वेब पेज में अलग-अलग सीएसएस बॉक्स मॉडल पोजिशनिंग ऐट्रिब्यूट्स से आप बॉक्स मॉडल में वेब पेज कंटेंट एलिमेंट इनफार्मेशन को बॉक्स मॉडल में कैसे और कहा रखा जाए ये कण्ट्रोल प्रदान करते हैं, जहा वेब डेवलपर यह तय करता है कि वेब पेज एलिमेंट्स को वेब पेज में कैसे डिस्प्ले किया जाए और मौजूदा वेब पेज एलिमेंट्स को अन्य एलिमेंट के साथ कैसे मेन्युप्लेट या कण्ट्रोल किया जाए। यहाँ डिफ़ॉल्ट रूप से आपको पाँच प्रकार के बॉक्स मॉडल पोजिशनिंग मिलते है. जिसमे, स्टैटिक बॉक्स मॉडल पोजीशन, रिलेटिव बॉक्स मॉडल पोजीशन, अब्सोलुट बॉक्स मॉडल पोजीशन, फिक्स्ड बॉक्स मॉडल, और स्टिकी बॉक्स मॉडल, पोजीशन प्रमुख बॉक्स मॉडल पोजीशन है।

Static box model positioning in CSS.

एचटीएमएल वेब पेज में सीएसएस स्टैटिक बॉक्स मॉडल पोजिशनिंग वेब पेज में सभी डिजिटल कंटेंट को डिफ़ॉल्ट पोजिशनिंग में अलाइन कर डिस्प्ले करता है। यह आपके वेब पेज में वेब एलिमेंट को नार्मल डॉक्यूमेंट बॉक्स की तरह प्रीव्यू करता है। जहा डिफ़ॉल्ट रूप से वेब पेज में स्टैटिक बॉक्स मॉडल पोजीशन को टॉप, बॉटम, लेफ्ट, और राइट बॉक्स मॉडल ऐट्रिब्यूट्स पर कोइस स्पेशल इम्पैक्ट नहीं होता है।

Static box model example in an HTML web page.

.boxmodel-static {

    width: 300px;

    height: 140px;

    background-color: teal;

}

Relative box model positioning in CSS.

एचटीएमएल वेब पेज में सीएसएस रिलेटिव बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट  को बॉक्स मॉडल डॉक्यूमेंट में डॉक्यूमेंट रिलेटिव पोजीशन में डिस्प्ले किया जाता है।

जहा सामान्यता रिलेटिव बॉक्स मॉडल पोजीशन में टॉप, बॉटम, लेफ्ट एंड राइट बॉक्स मॉडल प्रॉपर्टीज ऑफसेट आर्डर में प्रीव्यू होंगे।

Relative box model example in an HTML web page.

.boxmodel-relative {

    position: relative;

    width: 400px;

    height: 200px;

    background-color: yellow;

    top: 30px; /* it displays box model 20px down from top position */

    left: 20px; /* it moves active box model 20px from left position to right direction */

}

Absolute box model positioning in CSS.

मौजूदा एचटीएमएल वेब पेज में सीएसएस अब्सोलुट बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट को नियरेस्ट अब्सोलुट पोजीशन स्टैटिक पोजीशन के अलावा अन्य पोजीशन मौजूदा बॉक्स मॉडल के साथ रिलेट कर डिस्प्ले किया जाता है। जहा अब्सोलुट बॉक्स मॉडल प्रॉपर मार्जिन और एलाइनमेंट के साथ अब्सोलुट पोजीशन आर्डर में प्रीव्यू किया जाता है, कई बार अब्सोलुट बॉक्स मॉडल एक्सएक्ट डायमेंशन के साथ वेब पेज एलिमेंट को प्रीव्यू करते है। अब्सोलुट बॉक्स मॉडल वेब पेज डॉक्यूमेंट डिस्प्ले अन्य एलिमेंट को डिस्टर्ब या मेन्युप्लेट नहीं करते है।

Absolute box model example in an HTML web page.

.boxmodel-absolute {

    position: absolute;

    width: 200px;

    height: 130px;

    background-color: pink;

    top: 70px; /* it moves 70px box model form top position */

    left: 40px; /* it moves box model content 40px from the left direction */

}

Fixed box model positioning in CSS.

मौजूदा एचटीएमएल वेब पेज में सीएसएस फिक्स्ड बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट व्यूपोर्ट के रिलेटिव पोजीशन में प्रीव्यू होता है. जिससे, कि यह मौजूदा वेब पेज में वेब पेज स्क्रॉल करने पर भी फिक्स्ड बॉक्स मॉडल उसी स्थान पर डिस्प्ले होता है।

जहा बॉक्स मॉडल फिक्स्ड पोजीशन में इसे नार्मल वेब पेज डॉक्यूमेंट प्रीव्यू से रिमूव कर दिया जाता है।

Fixed box model example in an HTML web page.

.boxmodel-fixed {

    position: fixed;

    width: 70px;

    height: 70px;

    background-color: green;

    top: 20px; /* it moves 20px from the top of the viewport settings */

    right: 20px; /* it moves 20px from the right of the viewport settings */

}

Sticky box model positioning in CSS.

मौजूदा एचटीएमएल वेब पेज में सीएसएस स्टिकी बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट को यूजर स्क्रॉल कंडीशन के आधार पर रिलेटिव और अब्सोलुट पोजीशन के बीच मूव नहीं करता और उसे स्टिकी पोजीशन में होल्ड रखता है। स्टिकी बॉक्स मॉडल पोजीशन वेब ब्राउज़र में यूजर स्क्रॉल बॉटम पेज कंडीशन तक पहुँचने तक रिलेटिव बॉक्स मॉडल की तरह बिहेव करता है, उसके बाद यह बॉक्स स्टिकी आर्डर में फिक्स्ड हो जाता है, जबकि वेब पेज में स्क्रॉल पोजीशन चलती रहती है ।

Sticky box model example in an HTML web page.

.boxmodel-sticky {

    position: sticky;

    top: 0; /* set 0 sticky position of sticky box     model */

    width: 100%;

    height: 70px;

    background-color: gray;

}

Layout with the Box Model

Different types of box models can be designed and created using CSS scripting in HTML web pages. Where you will be able to create simple responsive and flex box model items in many different box models using CSS. In which you will be able to modify the inbuilt box model attributes and controls in the created box model. For example, you can custom apply and modify box model content, box padding, box border, box model margin, box model internal external border and default box margin settings.

Components of the default box model in CSS.

Box model content – Represents real data and information inside a user created box model, such as text, images, box digital content and other digital web elements.

Box model padding – The empty space inside the digital web page display content and box model border in the web page, which separates the content and border.

Box model border – In a web page, the box model border is the padding and display border around the web content, which is displayed by custom editing.

Box model margin – In the current web page, the digital content has the external space of the border, which separates the web elements from each other with a box model and displays them aligned by proper margin.

Uses and Methods of Box Model in CSS.

So let’s learn some basic methods and create and control custom box model element.

Aligning box model element centered.

Center aligning a block model element using box model margin attributes.

.boxmodel-center{

    width: 400px;

    margin: 0 auto; /* margin with 0 align box element in centred with left and right position */

    padding: 30px;

    border: 3px solid blue;

}

Create a box model with padding and border in CSS.

.style-boxmodel  {

    width: 340px;

    padding: 20px;

    border: 7px solid red; /* display box model red border */

    margin: 20px; /* add 20px Space among boxes model */

    background-color: aqua; /* display aqua background color*/

}

Creating the CSS box model with responsive layouts.

.responsive-boxmodel {

    width: 100%; /* display box model full width */

    max-width: 700px; /* display max width 700px */

    padding: 20px;

    border: 2px solid blue;

    margin: 30px auto; /* display 30px auto margin */

}

Stacking box model elements with margins in CSS.

.boxmodel-vertical-stack {

    margin-bottom: 30px; /* display space among box stack element */

}

Layout with the Box Model In Hindi

एचटीएमएल वेब पेज मे सीएसएस स्क्रिप्टिंग से अलग अलग प्रकार के बॉक्स मॉडल को डिज़ाइन क्रिएट कर उपयोग किया जा सकता है। जहा आप सीएसएस का उपयोग से कई प्रकार के विभिन्न बॉक्स मॉडल में सिंपल रेस्पॉन्सिव और फ्लेक्स बॉक्स मॉडल आइटम क्रिएट कर पाएंगे। जिसमे क्रिएटेड बॉक्स मॉडल में इनबिल्ट बॉक्स मॉडल ऐट्रिब्यूट्स और कण्ट्रोल को मॉडिफाई कर पाएंगे। जैसे, बॉक्स मॉडल कंटेंट, बॉक्स पैडिंग, बॉक्स बॉर्डर, बॉक्स मॉडल मार्जिन, बॉक्स मॉडल इंटरनल एक्सटर्नल बॉर्डर और डिफ़ॉल्ट बॉक्स मार्जिन सेटिंग्स को कस्टम अप्लाई और मॉडिफाई कर सकते है।

Components of the default box model in CSS.

Box model content – यूजर क्रिएटेड बॉक्स मॉडल के अंदर रियल डाटा और इनफार्मेशन को रिप्रेजेंट करता है, जैसे टेक्स्ट, इमेज, बॉक्स डिजिटल कंटेंट और अन्य डिजिटल वेब एलिमेंट है।

Box model padding – वेब पेज में डिजिटल वेब पेज डिस्प्ले कंटेंट और बॉक्स मॉडल  बॉर्डर के अंदर की एम्प्टी स्पेस है, जो कंटेंट और बॉर्डर को आपस में सेपरेट करते है।

Box model border – वेब पेज में बॉक्स मॉडल बॉर्डर पैडिंग और वेब कंटेंट के सर्राउंड डिस्प्ले बॉर्डर है, जिसे कस्टम एडिट कर डिस्प्ले किया जाता है।

Box model margin – मौजूदा वेब पेज में डिजिटल कंटेंट में बॉर्डर के एक्सटर्नल स्पेस है, जो वेब एलिमेंट को आपस में बॉक्स मॉडल से सेपरेट कर प्रॉपर मार्जिन कर अलाइन डिस्प्ले करता है।

Uses and Methods of Box Model in CSS.

So let’s learn some basic methods and create and control custom box model element.

Aligning box model element centered.

Center aligning a block model element using box model margin attributes.

.boxmodel-center{

    width: 400px;

    margin: 0 auto; /* margin with 0 align box element in centred with left and right position */

    padding: 30px;

    border: 3px solid blue;

}

Create a box model with padding and border in CSS.

.style-boxmodel  {

    width: 340px;

    padding: 20px;

    border: 7px solid red; /* display box model red border */

    margin: 20px; /* add 20px Space among boxes model */

    background-color: aqua; /* display aqua background color*/

}

Creating the CSS box model with responsive layouts.

.responsive-boxmodel {

    width: 100%; /* display box model full width */

    max-width: 700px; /* display max width 700px */

    padding: 20px;

    border: 2px solid blue;

    margin: 30px auto; /* display 30px auto margin */

}

Stacking box model elements with margins in CSS.

.boxmodel-vertical-stack {

    margin-bottom: 30px; /* display space among box stack element */

}

Box-sizing

In HTML web pages, web developers can manage and control CSS box model sizing default properties by custom modifying the height, width, padding, and box border attributes of existing box model web page elements. While by default, box model sizing is helpful in representing the height and width information of display elements in web page boxes that do not have box model sizing box padding and border attributes, you can deal with and preview responsive box elements by using box sizing custom properties to layout them.

CSS Box-Sizing Attributes.

css content-box (default) attributes.

In designed HTML web pages, height and width attributes are applied to existing web page box model content. With this, box model sizing previews padding and border height and width properties, where as content box models hold user-defined content and define multiple CSS box model sizing attributes.

How to Apply Content Box-Sizing Attributes.

Total box model width = width + padding-left + padding-right + border-left + border-right

Total box model height = height + padding-top + padding-bottom + border-top + border-bottom

CSS Box content Sizing Attributes example.

.content-box-model {

box-sizing: content-box;

width: 300px;

height: 200px;

padding: 40px;

border: 7px solid red;

background-color: lime;

margin-bottom: 10px;

}

css border-box sizing attributes.

In the existing HTML web page, you can find the box height, width, box content, padding and box border features in box model sizing. So that the total size of the existing HTML web page element will be equal to the custom user defined height and width. Through which you will be able to custom edit the web page box model size border properties.

How to Apply Border Box-Sizing Attributes.

Box border-sizing width = border content width + padding + border

Box border-sizing height = border content height + padding + border

CSS Box Border Sizing Attributes example.

.content-box-model {

box-sizing: content-box;

width: 300px;

height: 200px;

box-sizing: border-box;

width: 400px;

padding: 30px;

border: 10px solid red;

}

Use of border-box-sizing attributes in css.

Designing HTML web pages using border-box-css properties helps to apply height width border attributes in web page layout. Especially for web developers in responsive web page website design and development.

With border-box CSS attributes, you get the desired modification features in particular height and width padding and border in web page elements, which makes it easier to manage and control web page elements properly.

Applying CSS box-sizing attributes globally in HTML web pages.

Here you can apply border-box attributes in universal order to all tag elements in any of your HTML web page website projects. Where you can use it in the desired HTML web page by applying universal selector attributes.

* {

box-sizing: border-box;

}

Box-sizing In Hindi

एचटीएमएल वेब पेज में वेब डेवलपर सीएसएस बॉक्स मॉडल साइज़िंग डिफ़ॉल्ट प्रॉपर्टीज को मैनेज और कण्ट्रोल कर सकते है. जहा मौजूदा बॉक्स मॉडल वेब पेज एलिमेंट की हाइट, विड्थ, पैडिंग, और बॉक्स  बॉर्डर ऐट्रिब्यूट्स को कस्टम मॉडिफाई कर सकते है। जहा डिफ़ॉल्ट रूप से, बॉक्स मॉडल साइज़िंग वेब पेज बॉक्स में डिस्प्ले एलिमेंट की हाइट और विड्थ इनफार्मेशन को रिप्रेजेंट करने में हेल्पफुल है, जिसमे बॉक्स मॉडल साइज़िंग बॉक्स पैडिंग और बॉर्डर ऐट्रिब्यूट्स मौजूद नहीं होते है, जहा आप बॉक्स साइज कस्टम प्रॉपर्टीज को लेआउट कर रेस्पॉन्सिव बॉक्स एलिमेंट को डील और प्रीव्यू करते है।

CSS Box-Sizing Attributes.

css content-box (default) attributes.

डिज़ाइन एचटीएमएल वेब पेज में हाइट और विड्थ ऐट्रिब्यूट्स मौजूदा वेब पेज बॉक्स मॉडल कंटेंट में अप्लाई होती है. इसके साथ बॉक्स मॉडल साइज़िंग पैडिंग और बॉर्डर हाइट और विड्थ प्रॉपर्टीज को प्रीव्यू करते हैं, जहा कंटेंट बॉक्स मॉडल यूजर डिफाइन कंटेंट को होल्ड कर मल्टीप्ल सीएसएस बॉक्स मॉडल साइज़िंग ऐट्रिब्यूट्स को डिफाइन करते है।

How to Apply Content Box-Sizing Attributes.

Total box model width = width + padding-left + padding-right + border-left + border-right

Total box model height = height + padding-top + padding-bottom + border-top + border-bottom

CSS Box content Sizing Attributes example.

.content-box-model {

            box-sizing: content-box;

            width: 300px;

            height: 200px;

            padding: 40px;

            border: 7px solid red;

            background-color: lime;

            margin-bottom: 10px;

        }

css border-box sizing attributes. 

मौजूदा एचटीएमएल वेब पेज में आप बॉक्स मॉडल साइज़िंग में बॉक्स की हाइट, विड्थ, बॉक्स कंटेंट, पैडिंग और बॉक्स बॉर्डर फीचर मौजूद होते है. जिससे आप मौजूदा एचटीएमएल वेब पेज एलिमेंट का टोटल साइज़ कस्टम यूजर डिफाइन हाइट और विड्थ के बराबर होगा। जिसके माध्यम से आप वेब पेज बॉक्स मॉडल साइज बॉर्डर प्रॉपर्टीज को कस्टम एडिट कर पाएंगे।

How to Apply Border Box-Sizing Attributes.

Box border-sizing width = border content width + padding + border

Box border-sizing height = border content height + padding + border

CSS Box Border Sizing Attributes example.

.content-box-model {

        box-sizing: content-box;

        width: 300px;

        height: 200px;

        box-sizing: border-box;

        width: 400px;

        padding: 30px;

        border: 10px solid red;

        }

Use of border-box-sizing attributes in css.

डिज़ाइन एचटीएमएल वेब पेज बॉर्डर-बॉक्स-सीएसएस प्रॉपर्टीज का उपयोग वेब पेज लेआउट हाइट विड्थ बॉर्डर ऐट्रिब्यूट्स को अप्लाई करने में हेल्प करता है. स्पेशली वेब डेवलपर को रेस्पॉन्सिव वेब पेज वेबसाइट डिज़ाइन और डेवलपमेंट में।

बॉर्डर-बॉक्स सीएसएस ऐट्रिब्यूट्स के साथ, आपको वेब पेज एलिमेंट में पर्टिकुलर हाइट और विड्थ पैडिंग और बॉर्डर में डिजायर मॉडिफिकेशन फीचर्स मिलता है, जिससे वेब पेज एलिमेंट को प्रॉपर्ली मैनेज और कण्ट्रोल करना अधिक आसान हो जाता है।

Applying CSS box-sizing attributes globally in HTML web pages.

यहाँ आप अपने किसी एचटीएमएल वेब पेज वेबसाइट प्रोजेक्ट में सभी टैग एलिमेंट में बॉर्डर-बॉक्स ऐट्रिब्यूट्स को यूनिवर्सल आर्डर में अप्लाई कर सकते है. जहा आपको इसे डिजायर एचटीएमएल वेब पेज में यूनिवर्सल सिलेक्टर ऐट्रिब्यूट्स को अप्लाई कर उपयोग किया जा सकता है.

* {

    box-sizing: border-box;

}

Components: Content, Padding, Border, Margin

Using CSS script style in HTML web page, you can insert and manage text and other page elements in the box model in the web page. Generally, there are 4 main components in the box model in CSS scripting styling. Such as, web page content, box padding, box border, and box margin, attributes etc. Where the box model CSS attributes are used by HTML web developers for effective and responsive web development, HTML web developers use the box model component in HTML web page development.

So, let’s know the box model and its components in HTML web page.

Box model content attributes.

In web development, a particular HTML web page element box model is a reserved place for digital content or object. In which the box model previews the HTML web page element digital content, images, multimedia objects, displayed in the current web page.

Box model content example in basic CSS.

.box-model {

width: 200px;

height: 200px;

padding: 40px; /* it set space among content and border */

border: 4px solid lime; /* display border around the box */

margin: 40px; /* display space outside the box */

background-color: aqua; /* display box model background color */

}

css padding attributes.

In HTML web page, CSS box model padding is the empty space previewed in the padding between the box content information and the box border. Where it creates padding space around the preview content in the existing CSS box model so that the web page is previewed differently and separately from the text box model border.

Box padding model example in basic CSS.

Padding dimension in web page Display box model padding CSS attributes preview digital content in web page by adjusting padding space from top, bottom, left, right.

Box model padding example in basic CSS.

.box-model {

padding: 40px; /* it set space among content and border */

}

In the box model, you can display manual padding attributes for the padding space on all four sides.

.box-model {

padding: 12px 22px 20px 10px; /* it set space among content and border from left, right, top, and bottom */

}

Box model border attributes.

In the design HTML web page, the box model surrounds the border padding and web page content space from all four sides. Where you can use box border attribute and style the width, color and CSS style of the existing web page box in solid border, dash border, dash dotted border, etc. format.

With the box model border dimension, you can manage and control the attributes like border, border-width, border-style and border-color as per the existing content.

Box model border example in basic CSS.

.box-model {

border: 4px solid lime; /* display border around the box */

}

Box model margin attributes.

Margin is the space outside the location boundary of a text element in the current HTML web page. It previews the separation between HTML web page elements, which helps to control and easily manage text spacing in a web page layout.

Box margin dimension attributes are controlled by web page object margin properties, here it previews the margin space around the box model.

Box model margin example in basic CSS.

.box-model {

margin: 40px; /* display space outside the box */

}

HTML web developers can adjust and display different margins on all four sides as per their web page box model margin requirement.

.box-model {

margin: 10px 14px 19px 24px; /* display space outside the box */

}