- #u062bu0631u064au062f -

[ Position Property in CSS ]

u062bu0631u064au062f u062cu062fu064au062f u0648u0628u062au0643u0644u0645 u0639u0646 u0627u0644u0628u0648u0632u064au0634u0646 u0623u0648 u0645u0648u0636u0639 u0627u0644Element u0641u064a u0627u0644u0635u0641u062du0629u060c

u0637u0628u0639u0627u064b u0627u0644u0628u0648u0632u064au0634u0646 u0641u064au0647 u0628u0639u0636 u0627u0644u0627u0634u064au0627u0621 u0644u0627u0632u0645 u062au062au0648u0636u062d u0644u0643 u0648u064au0645u0643u0646 u0643u062bu064au0631 u0645u0627 u064au0639u0631u0641u0648u0646u0647u0627 u0648u0623u0634u064au0627u0621 u0647u0627u0645u0647 u0628u062au0643u0644u0645 u0639u0646u0647u0627 u0641u064a u0647u0630u0627 u0627u0644u062bu0631u064au062f u0625u0646 u0634u0627u0621 u0627u0644u0644u0647!

https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow"> - - - - -https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow">

u0646u0628u062fu0623 u0645u0642u062fu0645u0629 u0628u0633u064au0637u0629:

u0648u0634 u0647u0648 u0627u0644u0628u0648u0632u064au0634u0646u061f u0627u0644u0645u0639u0646u0649 u0627u0644u0627u0641u0636u0644 u0644u0648 u0646u0631u062cu0639 u0644u0644u0645u0639u0646u0649 u0641u064a u0627u0644u063au0629 u0627u0644u0639u0631u0628u064au0629 u0648u0647u0648 " u0627u0644u0645u0643u0627u0646" u0627u0648 "u0627u0644u0645u0648u0636u0639" - u0644u0643u0646 u0627u0644u0627u0641u0636u0644 u0623u0646u0643 u062au0639u062au0645u062f u0639u0644u0649 u0627u0644u0627u0633u0645 u0627u0644u0645u0639u062au0631u0641 u0641u064au0647 u0648u0647u0648 " position " https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow">

u0637u064au0628! u0648u0634 u0641u0643u0631u062au0647u061f

u0641u0643u0631u0629 u0627u0644u0628u0648u0632u064au0634u0646 u0628u0625u062eu062au0635u0627u0631 u0623u0646u0647 u064au062du062fu062f u0644u0643 u0645u0648u0636u0639 u0623u0648 u0645u0643u0627u0646 u0627u0644element

,u0648u0627u064au0636u0627u064b u0644u0647 u062eu0645u0633 u0642u064au0651u0645 u062fu0627u062eu0644 u0648u0638u064au0641u0629 u0627u0644u0628u0648u0632u064au0634u0646 u0648u0643u0644 u0648u062du062fu0629 u0644u0647u0627 u0641u0643u0631u0629 u0645u062eu062au0644u0641u0647u060c u0648u0628u0639u0636u0647u0645 u0645u062au0634u0627u0631u0643u064au0646 u0628u0623u0634u064au0627u0621 u0645u0639u064au0646u0647 u0628u0630u0643u0631u0647u0627 u062eu0644u0627u0644 u0647u0630u0627 u0627u0644u062bu0631u064au062f

- static
- fixed
- relative
- absolute
- sticky

u0637u064au0628! u0645u062bu0644 u0645u0627u0647u0648 u0645u0648u0636u062d u0628u0627u0644u0635u0648u0631u0629 u0648u0631u0627u062d u0646u0639u062au0645u062f u0627u0644u0635u0648u0631u0629 u0647u0630u064a u0628u0627u0644u062bu0631u064au062f u0641u064a u0634u0631u062d u0627u0644u0642u064au0651u0645 u0627u0644u062eu0645u0633,

u0628u0633 u0631u0643u0632 u0628u0627u0644u0635u0648u0631u0629 u0648u062du0627u0648u0644 u062au0641u0647u0645 u0646u0638u0631u0629 u0633u0637u062du064au0629 u062cu062fu0627u064bu060c u062du062au0649 u0648u0625u0646 u0645u0627u0641u0647u0645u062a u0643u0645u0644 u0645u0639u064a u0648u0628u0625u0630u0646 u0644u0644u0647 u062au0641u0647u0645!

https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow"> - - - https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow"> - - - https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow"> - - - https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow"> - - - https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow"> - - - https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2b07ufe0f" title="Downwards arrow" aria-label="Emoji: Downwards arrow">

[Position: Static]
u0637u064au0628 u0628u0646u0627u062eu0630 u0648u062du062fu0629 u0648u062du062fu0629 u0645u0646 u0627u0644u0635u0648u0631u0629 u0627u0644u064a u0641u0648u0642 u0648u0646u0634u0648u0641 u0627u0644u0641u0643u0631u0629 u0628u0634u0643u0644 u0627u0641u0636u0644u060cu060c

1 - u0644u0627u0632u0645 u062au0639u0631u0641 u062au0645u0627u0645u0627u064b u0625u0646 u0643u0644 element u0641u064a u0627u0644u0635u0641u062du0629 u064au0627u062eu0630 u0642u064au0645u0629 u0628u0648u0632u064au0634u0646 static (u062au0644u0642u0627u0626u064au0627u064b)

u0648u0647u0630u0627 u0627u0644u064a u064au062eu0644u064a u0627u0644u0639u0646u0627u0635u0631 u0641u064a u0627u0644u0635u0641u062du0629 u062bu0627u0628u062au0629 u0627u0630u0627 u0645u0627u062du062fu062b u0639u0644u064au0647u0627 u062au063au064au064au0631

u0623u0645u0627 u0628u0627u0644u0633u0627u064au0646u062au0643u0633 u0628u064au0643u0648u0646:
position:static;

u062du0644u0648! u0641u0647u0645u0646u0627 u0627u0648u0644 u0642u064au0645u0629 u0648u0647u064a static u0648u0633u0647u0644u0647 u0648u062eu0641u064au0641u0647u060c

u0637u064au0628 u0648u0634 u0647u064a u0642u064au0645u0629 fixed?

u0645u062bu0644 u0645u0627 u0645u0648u0636u062d u0628u0627u0644u0635u0648u0631u0629 u0627u0644u0634u0631u064au0637 u0627u0644u064a u062au0646u0632u0644 u0641u064au0647 u0648u0627u0644u064a u0647u0648 scrollbar u0639u0644u064au0647 u0639u0644u0627u0645u0629 u0625u0643u0633u060c u0648u0634 u064au0639u0646u064a u0647u0630u0627u061f

u0645u0639u0646u0627u0647: u0623u0646 u0643u0644u0645u0627 u062au062du0631u0643u062a u0628u0627u0644u0635u0641u062du0629 u0627u0644u0625u064au0644u064au0645u0646u062a u0627u0644u064a u0641u064au0647 position fixed u0645u0627 u064au062au063au064au0631 u0645u0646 u0645u0643u0627u0646u0647
u064au062au0628u0639..

u0637u064au0628 u062au0645u0627u0645! u062eu0644u0643 u0645u0639u064a u0648u0631u0643u0632 u0632u064au0646u060c u0628u0639u0637u064au0643 u0627u0645u062bu0644u0629 u0628u0633u064au0637u0629

u0634u0641u062a search u0623u0648 u0627u0644u0628u062du062b u0628u062au0648u064au062au0631u061f u0643u0644 u0645u0627 u062au0646u0632u0644 u062au062du062a u0645u0627 u064au062au063au064au0631 u0645u0643u0627u0646u0647 u0635u062du061f u0647u0630u0627 u0644u0623u0646u0647 fixed

u0637u064au0628! u0645u062bu0627u0644 u062bu0627u0646u064au061f : u0634u0648u0641 u0627u0644 gif

u0627u064au0636u0627u064b u0644u0627u0632u0645 u062au0639u0631u0641 u0623u0646 u0641u064a u0643u0644 u0628u0648u0632u064au0634u0646 u0627u0631u0628u0639 u0627u0645u0627u0643u0646 u0648u0647u064a

Top, Left, Right, Bottom

u064au0639u0646u064a u0645u062bu0644u0627u064b u0646u0628u064a u0628u0648u0632u064au0634u0646 u0641u064au0643u0633u064au062f u0648u0627u0644u0625u064au0644u064au0645u064au0646u062a u0648u0646u062eu0644u064a u0627u0644u0627u064au0644u0645u064au0646u062a u0645u0646 u0627u0644u064au0645u064au0646 100 u0628u0643u0633u0644

u0628u0627u0644u0633u0627u064au0646u062au0643u0633:
element{
position:fixed;
right:100px;
}

[Position: relative]

u0637u064au0628 u062du0644u0648 u0641u0647u0645u0646u0627 u0627u0644u0641u064au0643u0633u062fu060c u0648u0634 u0627u0644u0642u064au0645u0629 u0631u064au0644u0627u064au062au0641u061fu060c u0647u064a u0628u0643u0644 u0628u0633u0627u0637u0629 u0623u0646u062a u062au062du062fu062f u0627u0644u0645u0648u0636u0639 u0644u0643u0646 u0628u0627u0644u0646u0633u0628u0647 u0644u0645u0648u0636u0639u0647 u0627u0644u0623u0635u0644u064au060c u0648u0634 u0645u0639u0646u0649 u0647u0630u0627 u0627u0644u0643u0644u0627u0645u061f u0627u0644u062du064au0646 u0628u0641u0647u0645u0643
u0645u062bu0644 u0645u0627 u062au0634u0648u0641 u0628u0627u0644u0635u0648u0631u0629 u0627u0630u0627 u062du062fu062fu062a u0627u0644u0645u0643u0627u0646 u0648u062du0637u064au062au0647 u0645u062bu0644u0627u064b u0641u0648u0642 u0627u0644u0645u0643u0627u0646 u0627u0644u0623u0635u0644u064a u0628u064au0643u0648u0646 u0645u062du062cu0648u0632 - u062eu0644u0646u0627 u0646u0639u0637u064au0643 u0628u0639u0636 u0627u0644u0623u0645u062bu0644u0629

u064au062au0628u0639..

u0644u0648 u062au0634u0648u0641 u0627u0644u0641u064au062fu064au0648 u060c u0627u0644u0627u0648u0644u0649 u0628u0631u064au0644u0627u064au062au064au0641 u0648u0627u0644u062bu0627u0646u064au0629 u0648u0636u062du062a u0627u0646u0647 u0628u062fu0648u0646 u0631u064au0644u064au062au0641 u0627u0644u0627u064au062au0645 u0645u0627u0631u0627u062d u064au0643u0648u0646 u0645u062du062cu0648u0632 u0648u0627u0630u0627 u062du0630u0641u0646u0627u0647 u0628u064au062du0644 u0645u0643u0627u0646u0647 u0627u0644u0627u064au062au0645 u0627u0644u064a u062au062du062au0647

[Position: Absoulte]
u0627u0644u0623u0628u0633u0648u0644u062a u0623u0648 u0627u0644u063au064au0631 u0646u0633u0628u064a u0623u0648 u0627u0644u0645u0637u0644u0642u060c u0647u0630u0627 u0623u0646u0643 u0643u0644u0645u0627 u062au062du062fu062f u0645u0643u0627u0646u0647 u0645u0627u0631u0627u062d u064au062du062cu0632 u0645u0643u0627u0646 u060c

u0648u0627u064au0636u0627u064b u0645u0643u0627u0646u0647 u0628u064au0643u0648u0646 u0628u0627u0644u0646u0633u0628u0647 u0644u0644u0623u0628 u0648u0647u0648 u0625u0628u0646

u0643u064au0641 u064au0639u0646u064au061f u0628u0643u0644 u0628u0633u0627u0637u0629 u0644u0648 u0639u0646u062fu0646u0627 u062fu064au0641 "u0631u064au0644u0627u064au062au0641" ( u0631u0643u0632! u0631u064au0644u064au062au0641 ) u0648u062fu0627u062eu0644u0647 u0627u064au0644u064au0645u0646u062a u0627u0628u0633u0648u0644u062au060c u0644u0648 u062au062du062fu062f u0645u0643u0627u0646u0647 u0628u064au0643u0648u0646 u0641u0642u0637 u062fu0627u062eu0644 u0627u0644u0631u064au0644u0627u064au062au0641u060c
u064au062au0628u0639..

u0644u0643u0646 u0625u0630u0627 u0643u0627u0646 u0628u062fu0648u0646 u0623u0628 u0628u064au0643u0648u0646 u0627u0644u0627u0628 u0627u0644u0625u0641u062au0631u0627u0636u064a - u064au0639u0646u064a u0628u064au0643u0648u0646 u0628u0627u0644u062fu064au0641u0644u062a u0643u0644u0627u0633 u0644u0635u0641u062du0629 html
u0648u0647u0630u064a u0627u0644u0639u0644u0627u0642u0629 u0628u064au0646u0647u0645 ( u0628u0625u062eu062au0635u0627u0631 u0628u062fu0648u0646 u0645u0627 u0627u0642u0648u0644 u062au0641u0627u0635u064au0644 - u0628u0630u0643u0631 u0627u0643u062bu0631 u0645u0646 u0645u0635u062fu0631 u0642u0631u064au0628 u0627u0630u0627 u0643u0627u0646 u0648u062fu0643 u062au062au0639u0645u0642 u0627u0643u062bu0631 )

u0648u0645u062bu0644 u0645u0627u062au0644u0627u062du0638u0648u0646 u0628u0627u0644u0641u064au062fu064au0648 u0648u0636u062du062a u0627u0644u0641u0643u0631u0629 - u0641u064a u0627u0644u0628u062fu0627u064au0629 u0643u0627u0646 u0645u0639 u0631u064au0644u0627u064au062au0641 u0627u0645u0627 u0628u0639u062f u0645u0627 u0634u0644u0646u0627u0647 u0637u0644u0639 u0645u0646 u0627u0644u062fu064au0641!

[Position: sticky]

u064au0628u064au0644u0643 u062au0641u0647u0645 u0623u0646 sticky u064au0648u0645 u062au0646u0632u0644 u0627u0644u0633u0643u0631u0648u0644 u0628u0627u0631 u0623u0648 u062au0646u0632u0644 u0628u0627u0644u0645u0648u0642u0639 u062au062du062a u0648u0648u0635u0644u062a u0644u0647 u0631u0627u062d u064au0635u064au0631 fixedu060c

u0648u0644u0644u0627u0633u0641 u0627u0644u0635u0648u0631u0629 u0627u0644u064a u0643u0627u0646u062a u0645u0648u062cu0648u062fu0629 u0645u0627 u0630u0643u0631u062a u0627u0644sticky
u0644u0643u0646 u0648u0636u062du062a u0628u0627u0644u0641u064au062fu064au0648 u0627u0644u0641u0643u0631u0629

u064au062au0628u0639..

Sticky:

u0648u0627u064au0636u0627u064b u0641u064a u0645u0648u0642u0639 u0627u0644u0634u062eu0635 u0627u0644u0627u0633u0637u0648u0631u064a - u0641u0627u062fu064a u0627u0644u0627u0633u0648u062fu064a u0645u0648u062cu0648u062fu0629 sticky u0641u064a u0627u0644u0646u0627u0641u0628u0627u0631 u0645u062bu0644 u0645u0627u0647u0648 u0645u0648u0636u062d u0628u0627u0644u0641u064au062fu064au0648

@f_aswadi

u0634u0643u0631u0627u064b u0644u0643u0645 u0644u0644u0642u0631u0627u0621u0629u060c u0648u0623u062au0645u0646u0649 u0625u0633u062au0641u062fu062au0645 u0648u0641u0647u0645u062au0645 u0627u0644u062bu0631u064au062f u0628u0634u0643u0644 u062cu064au062f

u0627u0644u0643u0646u0648u0632 u0647u0646u0627!:

w3schools: https://www.w3schools.com/cssref/pr_class_position.asp

u0645u0642u0627u0644">https://www.w3schools.com/cssref/pr... u0639u0631u0628u064a: https://wiki.hsoub.com/CSS/position 
u0645u0642u0627u0644">https://wiki.hsoub.com/CSS/posit... u0628u0627u0644u0625u0646u062cu0644u064au0632u064a u062cu0645u064au0644: https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/

u0623u064a">https://www.freecodecamp.org/news/how-... u0627u0633u062au0641u0633u0627u0631 u0627u0646u0627 u0628u0627u0644u062eu062fu0645u0629!https://abs.twimg.com/emoji/v2/... draggable="false" alt="u2764ufe0f" title="Red heart" aria-label="Emoji: Red heart">

u0648u0627u064au0636u0627u064b u062du0627u0628 u0627u0634u0643u0631 u060c u0627u0644u0627u0633u0637u0648u0631u064a @Alaa_Najmi
u0648u0627u0644u0627u0633u0637u0648u0631u064a @PrograminLovers u0648u0627u0634u0643u0631u0643u0645 u0639u0644u0649 u062fu0639u0645u0643u0645 u0644u064a u0648u062au062du0641u064au0632u0643u0645 u0648u0628u0625u0630u0646 u0644u0644u0647 u0627u0644u0642u0627u062fu0645 u0627u0641u0636u0644!