CSS Display and Positioning
display Property
The display property determines how an element is displayed in the document.
- block: Starts on a new line and takes full width.
- inline: Does not start on a new line and only takes up as much width as necessary.
- inline-block: Like inline, but allows setting width and height.
- none: Hides the element.
<style>
.box { padding: 10px; background: #ddd; margin: 5px; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; width: 100px; }
.none { display: none; }
</style>
<div class="box block">Block</div>
<span class="box inline">Inline</span>
<span class="box inline-block">Inline-block</span>
<div class="box none">None (hidden)</div>
Block
Inline
Inline-block
visibility and z-index
visibility controls whether an element is visible. z-index controls stacking order.
<style>
.hidden { visibility: hidden; }
.box-z {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
}
.red { background: red; z-index: 1; }
.blue { background: blue; left: 30px; top: 30px; z-index: 2; }
</style>
<div class="box hidden">This is hidden</div>
<div class="box-z red">Red Box</div>
<div class="box-z blue">Blue Box</div>
Red Box
Blue Box
position Property
The position property defines how an element is positioned on the page.
- static: Default position.
- relative: Positioned relative to its normal position.
- absolute: Positioned relative to nearest positioned ancestor.
- fixed: Positioned relative to the viewport.
- sticky: Scrolls with content until a threshold.
<style>
.pos-box {
width: 100px;
height: 100px;
background: lightgreen;
margin: 10px;
}
.relative { position: relative; left: 20px; }
.absolute-container { position: relative; height: 150px; background: #eee; }
.absolute { position: absolute; top: 20px; left: 20px; background: coral; }
</style>
<div class="pos-box">Static</div>
<div class="pos-box relative">Relative</div>
<div class="absolute-container">
<div class="pos-box absolute">Absolute</div>
</div>
Static
Relative
Absolute
float and clear
float lets elements float beside each other, while clear prevents wrapping.
<style>
.float-box {
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
.clear-box {
clear: both;
background: #ccc;
padding: 10px;
}
</style>
<div class="float-box" style="background:red">Box 1</div>
<div class="float-box" style="background:blue">Box 2</div>
<div class="clear-box">Cleared content</div>
Box 1
Box 2
Cleared content
overflow Property
overflow controls what happens when content overflows its container.
- visible: Default, content overflows.
- hidden: Content is clipped.
- scroll: Adds scrollbars.
- auto: Adds scrollbars only when necessary.
<style>
.overflow-box {
width: 200px;
height: 100px;
border: 1px solid #000;
overflow: auto;
}
</style>
<div class="overflow-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel nisi at magna gravida porta. Curabitur at ipsum vel lorem.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel nisi at magna gravida porta. Curabitur at ipsum vel lorem.
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.