இந்தக் கட்டுரையைப் படித்ததன் விளைவாக, நீங்கள் CSS உடன் ஒன்றுடன் ஒன்று divs ஐ உருவாக்க முடியும். இந்த நோக்கத்திற்காக, முதலில், '' பற்றி அறிந்து கொள்வோம் நிலை 'மற்றும்' z-குறியீடு 'பண்புகள்.
தொடங்குவோம்!
CSS 'நிலை' சொத்து
HTML இல், '' ஐப் பயன்படுத்தி உறுப்புகளின் நிலையை நீங்கள் அமைக்கலாம். நிலை ”சொத்து. வலைப்பக்கத்தில் ஒரு உறுப்பின் இறுதி நிலை அதன் வலது, இடது, மேல், கீழ் மற்றும் z-இண்டெக்ஸ் பண்புகளுடன் இணைந்து தீர்மானிக்கப்படுகிறது.
தொடரியல்
நிலை சொத்தின் தொடரியல்:
நிலை : மதிப்பு
என்ற இடத்தில் ' மதிப்பு ”, முழுமையான, உறவினர், நிலையான மற்றும் ஒட்டும் போன்ற உறுப்புகளின் வெவ்வேறு நிலைகளை நீங்கள் அமைக்கலாம்.
CSS 'z-index' சொத்து
' z-குறியீடு உறுப்புகளின் அடுக்கு வரிசையை அமைக்க சொத்து பயன்படுத்தப்படுகிறது. z-குறியீட்டின் அதிக மதிப்பைக் கொண்ட உறுப்பு மற்றவற்றின் முன் வைக்கப்படுகிறது.
தொடரியல்
z-இண்டெக்ஸ் சொத்தின் தொடரியல் பின்வருமாறு:
z-குறியீடு : ஆட்டோ |எண்மேலே கொடுக்கப்பட்ட தொடரியல், “ ஆட்டோ ' பெற்றோர் உறுப்புக்கு ஏற்ப வரிசையை அமைக்கப் பயன்படுகிறது, அதே நேரத்தில் கையேடு வரிசைக்கு, ' எண் ” என்பது z-இண்டெக்ஸ் சொத்தின் மதிப்பாக அமைக்கப்பட்டுள்ளது.
இப்போது, CSS உடன் ஒன்றுடன் ஒன்று divs உருவாக்குவதற்கான நடைமுறை உதாரணத்திற்கு செல்லலாம்.
எடுத்துக்காட்டு 1: முதல் பகுதியுடன் இரண்டாவது பிரிவு ஒன்றுடன் ஒன்று
HTML பிரிவில், நாங்கள் இரண்டு பிரிவுகளை உருவாக்கி, வெவ்வேறு வகுப்புப் பெயர்களை “ div1 'மற்றும்' div2 ”.
HTML
< உடல் >< div வர்க்கம் = 'div1' >< / div >
< div வர்க்கம் = 'div2' >< / div >
< / உடல் >
இப்போது, CSS க்குச் சென்று கொடுக்கப்பட்ட வழிமுறைகளைப் பின்பற்றவும்:
- நிலை சொத்தின் மதிப்பை இவ்வாறு அமைக்கவும் அறுதி 'டிவ்1 இடம் நீங்கள் விரும்பும் இடத்தில் சரியாக இருக்கும்.
- div1 இன் உயரம் மற்றும் அகலத்தை 'இவ்வாறு சரிசெய்யவும் 250px 'மற்றும்' 300px ”.
- z-குறியீட்டின் மதிப்பு இவ்வாறு அமைக்கப்பட்டுள்ளது 1 ”.
- div1 இன் பின்னணி நிறத்தை “ என அமைக்கவும் rgb(4, 3, 75) ”.
CSS
.div1 {நிலை : அறுதி ;
உயரம் : 250px ;
அகலம் : 300px ;
z-குறியீடு : 1 ;
பின்னணி : rgb ( 4 , 3 , 75 ) ;
}
வெளியீடு
முதல் பிரிவு வெற்றிகரமாக வைக்கப்பட்டது. இப்போது நாம் இரண்டாவது பகுதிக்கு செல்கிறோம்.
div2 ஐ ஒன்றுடன் ஒன்று சேர்க்க, கொடுக்கப்பட்ட வழிமுறைகளைப் பின்பற்றவும்:
- div2 இன் நிலை சொத்து, அகலம் மற்றும் உயரத்தின் மதிப்பை '' என அமைக்கவும் div1 ”.
- z-இண்டெக்ஸின் மதிப்பை “ என அமைக்கவும் இரண்டு ” அதை முதல் divக்கு முன்னால் வைக்க.
- div2 க்கு வேறு பின்னணி நிறத்தை ' rgb(0, 204, 255) ”.
- div2 இன் விளிம்பை “ என அமைக்கவும் 50px ” விளிம்பு மேல் மற்றும் விளிம்பு இடது மதிப்பு.
- div2 இன் ஒளிபுகாநிலையை “ என அமைக்கவும் 0.7 ”.
CSS
.div2 {நிலை : அறுதி ;
அகலம் : 300px ;
உயரம் : 250px ;
z-குறியீடு : 3 ;
பின்னணி : rgb ( 0 , 204 , 255 ) ;
விளிம்பு : 50px ;
ஒளிபுகாநிலை : 0.7 ;
}
வெளியீடு
Div2 div1 உடன் வெற்றிகரமாக மேலெழுகிறது.
div இரண்டின் மேல் div1 ஐ அமைக்க விரும்பினால், z-index இன் மதிப்பை மாற்ற வேண்டும். இதற்கு ஒரு உதாரணத்தைப் பார்ப்போம்.
எடுத்துக்காட்டு 2: முதல் பிரிவு இரண்டாவதாக ஒன்றுடன் ஒன்று
இந்த எடுத்துக்காட்டில், இரண்டு divகளின் z-index இன் மதிப்பை மாற்றுவோம். இல் ' .div1 'CSS கோப்பின் வகுப்பு, மதிப்பை அமைக்கவும்' z-குறியீடு 'சொத்து' இரண்டு ”:
z-குறியீடு : இரண்டு ;அதன் பிறகு, ' .div2 'வகுப்பு, ' மதிப்பை அமைக்கவும் z-குறியீடு 'சொத்து' 1 ”:
z-குறியீடு : 1 ;இதன் விளைவாக, முதல் பகுதி இரண்டாவது பகுதிக்கு முன்னால் வைக்கப்படும்:
CSS உடன் இரண்டு ஒன்றுடன் ஒன்று டிவ்களை உருவாக்குவதற்கான எளிதான முறையை நாங்கள் தொகுத்துள்ளோம்.
முடிவுரை
' நிலை 'மற்றும்' z-குறியீடு ” சொத்து CSS இல் ஒன்றுடன் ஒன்று div களை உருவாக்க பயன்படுகிறது. இயல்பாக, z-குறியீட்டின் மதிப்பு 1 ஆகும், இது புதிதாக உருவாக்கப்பட்ட div ஏற்கனவே இருக்கும் divக்கு முன்னால் வைக்கப்படும். இருப்பினும், ஒன்றுடன் ஒன்று வரிசையை சரிசெய்ய உங்கள் தேவைகளுக்கு ஏற்ப எந்த மதிப்பையும் நீங்கள் குறிப்பிடலாம். இந்தக் கட்டுரையில், CSS உடன் ஒன்றுடன் ஒன்று Divs ஐ உருவாக்குவதற்கான முறைகளை நாங்கள் வழங்கியுள்ளோம்.