CSS நிலைப்பாடு தான் X, Y ஒருங்கிணைந்த விட
CSS நிலைப்படுத்தல் நீண்ட வலைத்தளம் அமைப்பு உருவாக்கும் ஒரு முக்கிய பகுதியாக உள்ளது. கூட Flexbox மற்றும் CSS கட்டம் போன்ற புதிய CSS அமைப்பு நுட்பங்கள் எழுச்சி, நிலைப்படுத்தல் இன்னும் தந்திரங்களை எந்த வலை வடிவமைப்பாளர் பையில் ஒரு முக்கியமான இடம் உள்ளது.
CSS பொருத்துதலை பயன்படுத்தும் போது, நீங்கள் செய்ய வேண்டியது முதல் விஷயம் CSS உறுதியை நிறுவுவது என்பது உலாவிக்கு சொல்ல உங்களுக்கு ஒரு குறிப்பிட்ட உறுப்புக்கான முழுமையான அல்லது உறவினர் நிலைப்பாட்டைப் பயன்படுத்தப் போகிறது. இந்த இரண்டு நிலை பண்புகள் இடையே உள்ள வித்தியாசத்தை நீங்கள் தெளிவாக புரிந்து கொள்ள வேண்டும்.
முழுமையான மற்றும் உறவினர் இரண்டு CSS நிலை பண்புகள் பெரும்பாலும் வலை வடிவமைப்பு பயன்படுத்தப்படும் போது, நிலை சொத்து நான்கு மாநிலங்களில் உள்ளன:
- நிலையான
- அறுதி
- உறவினர்
- நிலையான
நிலையான வலைப்பக்கத்தின் எந்த உறுப்புக்கும் இயல்புநிலை நிலை உள்ளது. நீங்கள் ஒரு உறுப்பு நிலையை வரையறுக்கவில்லை என்றால், அது நிலையானதாக இருக்கும். இது HTML ஆவணத்தில் எங்கு உள்ளதோ அது அந்த ஆவணத்தின் சாதாரண ஓட்டத்திற்குள் எப்படி காட்டப்படும் என்பதன் அடிப்படையில் திரையில் காண்பிக்கப்படும் என்பதாகும்.
நீங்கள் நிலையான நிலை கொண்ட உறுப்புக்கு மேல் அல்லது இடப்புறம் இடப்புற நிலை விதிகளை பயன்படுத்தினால், அந்த விதிகள் புறக்கணிக்கப்படும் மற்றும் இயல்பான ஆவணம் ஓட்டத்தில் தோன்றும் உறுப்பு இருக்கும். உண்மையாக, நீங்கள் அரிதாகவே, எப்போதாவது, CSS இல் ஒரு நிலையான நிலையை ஒரு உறுப்பு அமைக்க வேண்டும், ஏனெனில் இது இயல்புநிலை மதிப்பாகும்.
முழுமையான CSS நிலை
முழுமையான நிலைப்பாடு புரிந்து கொள்ள எளிதான CSS நிலை. இந்த CSS நிலையை சொத்து தொடங்க:
நிலை: முழுமையான;இந்த மதிப்பு, உலாவியின் நிலைப்பாட்டிற்குப் போகும் வகையில், ஆவணத்தின் இயல்பான ஓட்டத்திலிருந்து அகற்றப்பட வேண்டும், அதற்கு பதிலாக பக்கத்தின் சரியான இடத்தில் வைக்க வேண்டும் என்று உலாவி சொல்கிறது. இது அந்த உறுப்பு நெருங்கிய நிலைத்தன்மையற்ற நிலையற்ற மூதாதையரின் அடிப்படையில் கணக்கிடப்படுகிறது.
ஒரு முழுமையான உறுப்பு உறுப்பு ஆவணத்தின் இயல்பான ஓட்டத்திலிருந்து எடுத்துக் கொள்ளப்படுவதால், இது HTML அல்லது அதற்கு முன்பு உள்ள உறுப்புகள் எப்படி வலைப்பக்கத்தில் நிலைத்திருக்கின்றன என்பதைப் பாதிக்காது.
உதாரணமாக - உங்கள் உறவினரின் மதிப்பைப் பயன்படுத்தி ஒரு பிரிவை வைத்திருந்தால் (இந்த மதிப்பை விரைவில் பார்க்கலாம்), அந்த பிரிவில் நீங்கள் பிரிவின் மேல் இருந்து 50 பிக்சல்களை நிலைப்படுத்த விரும்பும் ஒரு பத்தியில் இருந்தீர்கள் இந்த பத்தியில் "முழுமையான" நிலை மதிப்பை சேர்த்து, "மேல்" சொத்தில் 50px இன் மதிப்புள்ள மதிப்புடன் இது சேர்க்கப்படும்.
நிலை: முழுமையான; மேல்: 50px;இந்த முற்றிலும் நிலைப்படுத்தப்பட்ட உறுப்பு எப்போதும் அந்த ஒப்பீட்டளவில் நிலைபடுத்தப்பட்ட பிரிவு மேல் இருந்து 50 பிக்சல்கள் காண்பிக்கும் - சாதாரண ஓட்டத்தில் அங்கு வேறு என்ன காட்சி இல்லை. உங்கள் "முற்றிலும்" நிலைப்படுத்தப்பட்ட உறுப்பு ஒப்பீட்டளவில் நிலைநிறுத்தப்பட்ட ஒன்றை அதன் சூழலாகப் பயன்படுத்துகிறது, மேலும் நீங்கள் பயன்படுத்துகின்ற முன்மாதிரி மதிப்பானது உறவினருக்கு ஒப்பாகும்.
நீங்கள் பயன்படுத்த வேண்டிய நான்கு நிலை பண்புகள்:
- மேல்
- வலது
- கீழே
- விட்டு
நீங்கள் மேல் அல்லது கீழ் பயன்படுத்தலாம் (ஒரு உறுப்பு இந்த மதிப்புகள் இருவரும் படி நிலைப்படுத்த முடியாது என்பதால்) மற்றும் வலது அல்லது இடது.
ஒரு உறுப்பு முழுமையின் நிலைக்கு அமைக்கப்பட்டிருந்தால், ஆனால் அங்கு அது நிலையான-நிலைப்படுத்தப்பட்ட முந்திய முதுகெலும்புகள் கிடையாது, அது உடலின் உறுப்புடன் தொடர்புடையதாக இருக்கும், இது பக்கத்தின் மிக உயர்ந்த உறுப்பு உறுப்பு ஆகும்.
உறவினர் நிலைப்பாடு
நாம் ஏற்கனவே உறவினர் நிலைப்பாட்டை குறிப்பிட்டுள்ளோம், இப்போது அந்த சொத்து இப்போது பார்ப்போம்.
ஒப்பீட்டு நிலைப்படுத்தல் முழுமையான நிலைப்பாடு எனும் அதே நான்கு நிலைப்பொருட்களைப் பயன்படுத்துகிறது, ஆனால் அதன் நெருக்கமான சாரமற்ற நிலையற்ற மூதாதையர் மீது உள்ள உறுப்புகளின் நிலைக்கு பதிலாக, அது இயல்பான ஓட்டத்தில் இருந்திருந்தால் உறுப்பு எங்கே இருக்கும் என்பதிலிருந்து தொடங்குகிறது.
உதாரணமாக, உங்கள் வலைப்பக்கத்தில் மூன்று பத்திகள் இருந்தால், மூன்றில் ஒரு இடத்தில் "நிலை: உறவினர்" பாணி உள்ளது, அது தற்போதைய இடத்தின் அடிப்படையில் அமைந்திருக்கும்.
பத்தி 2.
பத்தி 3.
மேலே உள்ள எடுத்துக்காட்டில், மூன்றாம் பத்தியில் கொள்கலன் உறுப்பு இடது பக்கத்தில் இருந்து 2 ஈ நிலைப்படுத்தப்படும், ஆனால் இன்னும் முதல் இரண்டு பத்திகள் கீழே இருக்கும். இது ஆவணம் சாதாரண ஓட்டத்தில் இருக்கும், மற்றும் சிறிது ஈடு. நீங்கள் அதை நிலைக்கு மாற்றினால்: முழுமையானது; அதைப் பின்தொடரும் எதுவும் அது மேல் காட்டப்படும், ஏனென்றால் அது இனி ஆவணத்தின் சாதாரண ஓட்டத்தில் இருக்காது.
ஒரு வலைப்பக்கத்தில் உள்ள கூறுகள் பெரும்பாலும் நிலை மதிப்பு அமைப்பதற்கு பயன்படுத்தப்படுகின்றன: எந்த ஈடுபாடில்லாத மதிப்புடன் தொடர்புடையது, இதன் பொருள் இயல்பான ஓட்டத்தில் தோன்றும் இடமாக இருக்கும். மற்ற உறுப்புகளை முற்றிலும் நிலைநிறுத்தக்கூடிய ஒரு சூழலாக அந்த உறுப்பு ஒன்றை அமைப்பதையே இது செய்யப்படுகிறது. உதாரணமாக, உங்களுடைய முழு வலைத்தளத்தையும் "கொள்கலன்" (இது வலை வடிவமைப்பில் மிகவும் பொதுவான காட்சியாகும்) கொண்டிருக்கும் ஒரு பிரிவை நீங்கள் வைத்திருந்தால், அந்தப் பிரிவானது உறவினரின் நிலைக்கு அமைக்கப்படலாம், இதன்மூலம் அதை உள்ளே பயன்படுத்தலாம் அது ஒரு நிலைப்பாடு சூழலாக.
நிலையான நிலைப்பாடு பற்றி என்ன?
நிலையான நிலைப்பாடு முழுமையான நிலைப்பாடு போன்றது. உறுப்புகளின் நிலைப்பாடு முழுமையான மாதிரியைப் போலவே கணக்கிடப்படுகிறது, ஆனால் நிலையான உறுப்புகள் பின்னர் அந்த இடத்திலேயே சரி செய்யப்படுகின்றன-கிட்டத்தட்ட ஒரு நீரோடை போல. பக்கத்திலுள்ள எல்லாவற்றையும் அந்த உறுப்பு கடந்த காலத்திற்கு மேலே நகர்த்தும்.
இந்த சொத்து மதிப்பு பயன்படுத்த, நீங்கள் அமைக்க வேண்டும்:
நிலை: நிலையான;நினைவில் கொள்ளுங்கள், உங்கள் தளத்தில் இடத்தில் ஒரு உறுப்பை நீங்கள் சரிசெய்யும்போது, அது உங்கள் வலைப்பக்கத்தில் அச்சிடப்பட்டிருக்கும் போது அந்த இடத்தில் அச்சிடப்படும். எடுத்துக்காட்டாக, உங்கள் உறுப்பு உங்கள் பக்கத்தின் மேல் இருந்தால், அது ஒவ்வொரு அச்சிடப்பட்ட பக்கத்தின் மேல் தோன்றும் - இது பக்கத்தின் மேல் சரி செய்யப்பட்டது. அச்சிடப்பட்ட பக்கங்களை நிலையான கூறுகளை எவ்வாறு காண்பிப்பது என்பதை மாற்ற நீங்கள் ஊடக வகைகளை பயன்படுத்தலாம்:
@ ஊடக திரை {h1 # முதல் {நிலை: நிலையான; }} @ media print {h1 # first {position: static; }}ஜெனிபர் கிரைனின் அசல் கட்டுரை. 1/7/16 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது.