CSS ڈسپلے پراپرٹی اور پوزیشن پراپرٹی ۔ لیکچر 9

اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ نواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا نواں لیکچر ۔CSS ڈسپلے پراپرٹی اور پوزیشن پراپرٹی

display پراپرٹی

display پراپرٹی یہ بتاتی ہے کہ ایک عنصر کو کیسے دکھایا جانا چاہیے۔

display: inline;

<style>
        li {
            display: inline;
            margin-right: 10px;
        }

        span {
            display: block;
            margin-top: 10px;
        }

        .inline-block-example {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: lightcoral;
            margin: 10px;
        }
</style>

ان لائن عناصر نئی لائن سے شروع نہیں ہوتے اور صرف اتنی ہی چوڑائی لیتے ہیں جتنی ضروری ہو۔ مثال کے طور پر، <span>, <a>, <img>.

<ul>
        <li>آئٹم 1</li>
        <li>آئٹم 2</li>
        <li>آئٹم 3</li>
    </ul>

display: block;

بلاک عناصر ہمیشہ نئی لائن سے شروع ہوتے ہیں اور پوری دستیاب چوڑائی لے لیتے ہیں۔ مثال کے طور پر، <div>, <h1>, <p>.

<span>یہ ایک اسپین ہے جسے بلاک کے طور پر دکھایا گیا ہے۔</span>
    <span>یہ دوسرا اسپین ہے جسے بلاک کے طور پر دکھایا گیا ہے۔</span>

display: inline-block;

ان لائن بلاک عناصر ان لائن کی طرح ہوتے ہیں لیکن ان کی چوڑائی اور اونچائی مقرر کی جا سکتی ہے۔

<div class="inline-block-example">باکس 1</div>
    <div class="inline-block-example">باکس 2</div>

پوزیشن پراپرٹی

position پراپرٹی

position پراپرٹی یہ بتاتی ہے کہ ایک عنصر کو دستاویز میں کیسے پوزیشن کیا جانا ہے۔

• static: ڈیفالٹ قیمت۔ عناصر کو معمول کے بہاؤ کے مطابق پوزیشن کیا جاتا ہے۔
• relative: عنصر کو اس کی معمول کی پوزیشن کے نسبت پوزیشن کیا جاتا ہے۔
• fixed: عنصر کو ویو پورٹ کے نسبت پوزیشن کیا جاتا ہے، مطلب یہ اسکرول کرنے پر بھی اپنی جگہ پر رہتا ہے۔
• absolute: عنصر کو قریب ترین پوزیشن والے آباؤ اجداد کے نسبت پوزیشن کیا جاتا ہے۔

مثالیں

  <style>
        .relative {
            position: relative;
            left: 30px;
            border: 3px solid #73AD21;
        }

        .fixed {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 200px;
            border: 3px solid #73AD21;
        }

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

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

<div class="relative">یہ عنصر نسبتی طور پر پوزیشن کیا گیا ہے۔</div>

<div class="fixed">یہ عنصر فکسڈ پوزیشن کیا گیا ہے۔</div>

<div class="relative-container">
        یہ نسبتی کنٹینر ہے۔</div>

<div class="absolute">یہ مطلق طور پر پوزیشن کیا گیا عنصر ہے۔</div>
    </div>

اردو میں تمام لیکچرز کی فہرست

انگلش زبان میں لیکچر پی کے بلاگ پر دیکھیں