موقعیت Layout را در CSS قرار دهید

عکس پروفایل Adipta Biswas Hacker Noon

@تنسوریکآدیپتا بیسواس

سلام?! من یک مشاور Analytics هستم که به توسعه دهنده وب تبدیل شده ام.

سلام دنیا! در این مقاله ، سعی خواهیم کرد مفاهیم یکی از پیچیده ترین و مهمترین مباحث در CSS را درک کنیم.

خاصیت طرح موقعیت در CSS فقط برای قرار دادن و موقعیت یابی عناصر به ترتیب در یک سند HTML استفاده می شود. آنها موقعیت های مربوطه را به عناصر HTML اختصاص می دهند تا طراحی کلی صفحه ما به خوبی حفظ و مدیریت شود.

ویژگی پرکاربردی که در CSS مورد استفاده قرار می گیرد به شرح زیر است:

1. موقعیت ثابت:

هنگامی که یک عنصر HTML با اختصاص می یابد

static

موقعیت ، ویژگی های موقعیت مختلف مانند

left

،

right

،

top

و

bottom

کار نمی کند عناصر موجود در یک سند HTML به طور پیش فرض موقعیت ثابت را دارند.

بیایید کد زیر را در IDE کپی و جایگذاری کنیم تا ببینیم چه اتفاقی می افتد.


<html lang="en"
  <head
    <style
      #Section {
        height: 200vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }

      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }

      #Div2 {
        position: static;
        left: 
سئو PBN | خبر های جدید سئو و هک و سرور