Jassif Team Institution

CSS Positioning

CSS positioning என்பது வலைப்பக்கத்திற்குள் உறுப்புகளின் இடத்தைக் கட்டுப்படுத்துவது பற்றியது.

CSS positioning உடன், நீங்கள் இயல்பான ஆவணப் பாய்வை மீறலாம்.

The CSS position Property

position பண்பானது ஒரு உறுப்புக்கான positioning வகையைக் குறிப்பிடுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• static - இது இயல்புநிலை
• relative
• fixed
• absolute
• sticky

உறுப்புகள் பின்னர் top, bottom, left, மற்றும் right பண்புகளுடன் அவற்றின் இறுதி இடத்தில் வைக்கப்படுகின்றன.

CSS position: static

அனைத்து HTML உறுப்புகளும் இயல்பாக static ஆக வைக்கப்பட்டுள்ளன.

Static வைக்கப்பட்ட உறுப்புகள் top, bottom, left, மற்றும் right பண்புகளால் பாதிக்கப்படாது.

position: static; கொண்ட உறுப்பு எப்போதும் பக்கத்தின் இயல்பான பாய்வின்படி வைக்கப்படுகிறது:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

CSS position: relative

position: relative; கொண்ட உறுப்பு ஆவணப் பாய்வில் அதன் இயல்பான நிலையுடன் தொடர்புடையதாக வைக்கப்படுகிறது.

top, right, bottom, மற்றும் left பண்புகளை அமைப்பது உறுப்பை அதன் இயல்பான நிலையிலிருந்து சரிசெய்ய காரணமாகும். மற்ற உள்ளடக்கம் உறுப்பால் விடப்பட்ட இடைவெளியில் பொருந்த சரிசெய்யப்படாது.

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

CSS position: fixed

position: fixed; கொண்ட உறுப்பு viewport உடன் தொடர்புடையதாக வைக்கப்படுகிறது, அதாவது பக்கம் உருளப்பட்டாலும் அது எப்போதும் அதே இடத்தில் இருக்கும். top, right, bottom, மற்றும் left பண்புகள் உறுப்பின் இறுதி இடத்தை அமைக்க பயன்படுத்தப்படுகின்றன.

ஒரு fixed உறுப்பு பக்கத்தில் ஒரு இடைவெளியை விட்டுவைக்காது, அது பொதுவாக அமைந்திருக்கும்.

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

CSS position: absolute

position: absolute; கொண்ட உறுப்பு அருகிலுள்ள position வைக்கப்பட்ட மூதாதையுடன் (static அல்லாத position கொண்ட) தொடர்புடையதாக வைக்கப்படுகிறது.

இருப்பினும்; ஒரு absolute வைக்கப்பட்ட உறுப்புக்கு position வைக்கப்பட்ட மூதாதைகள் இல்லை என்றால், அது ஆவண உடலைப் பயன்படுத்துகிறது, மேலும் பக்கம் உருள்வதன் மூலம் நகரும்.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid red;
}

CSS position: sticky

position: sticky; கொண்ட உறுப்பு உருளல் நிலையைப் பொறுத்து relative மற்றும் fixed position இடையே மாறுகிறது.

ஒரு sticky உறுப்பு ஒரு குறிப்பிட்ட உருளல் நிலை அடையும் வரை relative ஆக வைக்கப்படுகிறது - பின்னர் அது அந்த இடத்தில் "ஒட்டிக்கொள்கிறது" (position:fixed போல).

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Positioning Text On an Image

படத்தின் மேல் உரையை எவ்வாறு வைப்பது:

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Exercise

HTML உறுப்புகளுக்கான position பண்பின் இயல்புநிலை மதிப்பு என்ன?

CSS Position Properties

Positioning தொடர்பான CSS பண்புகள்: