Overflow and z-index in CSS
Overflow and z-index सीखें आसानी से अपनी हिन्दी में और कमायें...लाखों
I am working as freelancer. I am a experienced full stack web developer. My lovely stack is MERN but I am open for new tech. I love to work with teammates for achieve goals. I love researches to find specific new things.
What is Overflow in CSS?
Web development में web page design करते समय कभी-कभी ऐसा होता है कि जो content होता है वह काफी ज्यादा हो जाता है, और किसी box की सीमा को पार cross कर जाता है। ऐसी स्थिति में content को मैनेज करना जरूरी होता है, नहीं तो पेज भद्दा हो जाता है। मान लीजिए कि कुछ text लिखे गये हैं किसी बाक्स के भीतर , लेकिन बॉक्स का साइज पर्याप्त न होने पर text बॉक्स के बाहर निकल जाता है, तो बाहर निकले हुए text को overflow कहते हैं।
The Overflow Property:
Overflow property यह तय करती है कि जो चीज content overflow हो गया है, उसका क्या करना है या उसे कैसे मैनेज करना है। इसको मैनेज करने के कुछ styles इस प्रकार हैं-
overflow:visible
By default overflow content इसी style में होता है। जो unclipped या unmanaged होता है।
Html:
<div>
<p>......</p>
</div>
CSS:
div{
`width: 400px;`
`height: 200px;`
`border: 2px solid red;`
`overflow: visible;`
`}`
Output:
overflow:hidden
Overflow content को छिपाने के लिए यह style लगाई जाती है।
Html:
<div>
<p>......</p>
</div>
CSS:
div{
`width: 400px;`
`height: 200px;`
`border: 2px solid red;`
`overflow: hidden;`
`}`
Output:
overflow:scroll
यह style overflow content को समेट लेता है, और scrollbar की मदद से उन्हें अंदर ही दिखाता है, बाहर नहीं जाने देता है। यह साइड में और नीचे दोनों जगह scroll बना देता है, चाहे नीचे जरूरत न हो तब भी।
Html:
<div>
<p>......</p>
</div>
CSS:
div{
`width: 400px;`
`height: 200px;`
`border: 2px solid red;`
`overflow: scroll;`
`}`
Output:
overflow: auto
यह भी scroll की तरह ही अप्लाई होता है, परन्तु इसमे यह फर्क होता है कि जहां scroll की जरूरत होती है, वहीं scroll लगाता है।
Html:
<div>
<p>......</p>
</div>
CSS:
div{
`width: 400px;`
`height: 200px;`
`border: 2px solid red;`
`overflow: auto;`
`}`
Output:
overflow-x, overflow-y
ऊपर के चारों styles के अलावा हर एक direction के content को अलग-अलग भी clip किया जा सकता है, मैनेज किया जा सकता है। overflow-x horizontally content को मैनेज करता है। overflow-y vertically content को मैनेज करता है। दोनों को साथ या अलग-अलग भी प्रयोग किया जा सकता है।
overflow-x:auto;
overflow-y:auto;
What is z-index in CSS?
Web page design करते समय जब कोई element किसी दूसरे element के ऊपर या नीचे stacking position में हो जाता है, तो उसे अपने हिसाबसे करने के लिए styling में z-index की व्यवस्था की गयी है। जिससे आसानी से कंटेंट को ऊपर या नीचे अपने अनुसार किया जाता है।
Use of z-index
z-index में जिस content की value ज्यादा होती है, वह कंटेंट ऊपर होता है। इसकी value integars यानी -1,1,2 ऐसे होती है। जिस की value कम होगी वह नीचे रहेगा।
Html:
<div></div>
`<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus, necessitatibus.consectetur adipisicing elit. Delectus, necessitatibusLorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus, necessitatibus.consectetur adipisicing elit. Delectus, necessitatibus</p>`
CSS:
div{
`width: 100px;`
`height: 100px;`
`background-color: aqua;`
`position: absolute;`
`top:10px;`
`z-index:-1;`
`}`
output:
