css.pdf

ၾကကတ နရက ရ ႕ခငတအခမ

  • No School
  • AA 1
  • 116

This preview shows page 93 - 97 out of 116 pages.

ၾကိဳက္တဲ့ ေနရာကို ေရ ႊ႕ခ်င္တဲ့အခါမွာ position ကို absolute ထားေပးရပါတယ္။ ျပီးရင္ top , bottom ,left,right value ေတြနဲ႕ ေရ ႊ႕ေပးလို႕ရပါတယ္။ ေအာက္က ဥပမာ ေလးကို ၾကည့္ၾကည့္လုိက္ပါ။ <html> <head> <style type = "text/css" > h2 { position: absolute ; left :100px; top :150px; } </style> </head> <body> <h2> This is a heading with an absolute position </h2> <p> With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page. </p> </body> </html> CSS for starter , written by saturngod ( ) 93
Image of page 93

Subscribe to view the full document.

အဲဒါကို run လိုက္ရင္ ေအာက္ကလို ျမင္ရပါမယ္။ အခု position relative နဲ႕ position absolute ကို ၾကည့္ရေအာင္။ <html> <head> <style type = "text/css" > h2.abs { position: absolute ; left :100px; top: 0px ; } h2.abs2 { position: absolute ; top : 0px ; right: 0px ; } div.relative { color: #FFF ; background: #000 ; position: relative ; height: 200px ; } </style> </head> <body> CSS for starter , written by saturngod ( ) 94
Image of page 94
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <div> <h2 class = "abs" > This is header </h2> </div> <div class = "relative" > Sample Text <h2 class = "abs2" > This is header </h2> </div> </html> အဲဒါကို run လိုက္ရင္ ေအာက္ကလို ျမင္ရပါမယ္။ position ကို absolute ထားလိုက္တဲ့ အခါမွာ browser ေပၚက ၾကိဳက္တဲ့ ေနရာကို ေရ ႊ႕လို႕ရပါတယ္။ သို႕ေပမယ့္ menu ေတြ တည္ေဆာက္တဲ့အခါမွာ ျဖစ္ျဖစ္ layout ခ်တဲ့ ေနရာ မွာ ျဖစ္ျဖစ္ div layer ထဲက ၾကိဳက္တဲ့ ေနရာကို ပဲ ေရ ႊ႕ခ်င္တဲ့အခါမွာ div ကို position: relative ဆိုျပီး ေၾကျငာထားရပါမယ္။ CSS for starter , written by saturngod ( ) 95
Image of page 95

Subscribe to view the full document.

Z-Index Z-Index ဆိုတာကေတာ့ CSS မွာ ဘယ္သူက အေပၚမွာ ေျပာေစခ်င္လဲဆိုတာကို သတ္မွတ္တာပါ။ တနည္းေျပာရင္ တစ္ခုနဲ႕
Image of page 96
Image of page 97
  • Fall '19

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern