CSS: Why h3 drops down its parent div? - html

Question

There is a simple example where a div element contains h3.
But the h3 element drops down its parent div when h3 has position relative.
Changing h3 position to absolute solves this problem.
What is the reason?
.personal-details{
background-color: green;
}
.personal-image{
display: inline-block;
width: 150px;
height: 150px;
background-color: white;
}
.personal-description {
display: inline-block;
width: 150px;
height: 150px;
background: black;
}
.personal-description h3 {
position: relative; /*absolute solves the problem*/
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>

Answer 1

This is caused by the default vertical-align: baseline; property of inline-block elements.
Overriding the default with vertical-align: top for your element will get you somewhere like correct:
.personal-details {
background-color: green;
vertical-align: middle
}
.personal-image {
display: inline-block;
width: 150px;
height: 150px;
background-color: green;
}
.personal-description {
display: inline-block;
width: 150px;
height: 150px;
background: black;
vertical-align: top;
}
.personal-description h3 {
position: relative;
background: yellow;
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
Notice I say "somewhere like correct" as you will still have issues with space around the elements (notice the gap below the black square and space between the two child divs). But that is out of the scope of your question and has been dealt with many times before.

Answer 2

.personal-details{
background-color: red;
}
.personal-image{
display: inline-block;
width: 150px;
height: 150px;
background-color: green;
margin:0;
}
.personal-description {
float:left;
display: inline-block;
width: 150px;
height: 150px;
background: black;
margin:0;
padding:0;
}
.personal-description h3 {
margin:0;
background-color:blue;
padding:0;
position: relative; /*absolute solves the problem*/
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>

Answer 3

May be your are familiar with all the positioning.Firstly, you need to understand about it.There are four possible useful positioning in css which are given below.
Static
Relative
Absolute.
Fixed
-Static positioning:
It is basically a default position of every element or tag, use of this position will never effect on your element’s state or position.In static we can not use top,left, bottom & right properties.
position:static;
-Relative:
Relative positioning,makes element or tag movable.Yes, we can move it any where on container.By default it works like an static but we can use left,top,bottom & right in it.
position: relative;
top:50px;
left:50px;
-Absolute:
Absolute positioning, get the space according to browser window or container(that may be parent or ancestor) window.If container window’s position set to relative than absolute will get the position according to container.
position:absolute;
left:0px;
right:0px;
Task: Now, make a parent div and it’s two child's and check both relative and absolute.
/* Example */
</div>
<div class='box2'>
<h3>Here my name</h3>
</div>
</div>
.parent_box{
background-color:grey;
margin-top: 20px;
}
.box1{
height:200px;
width: 200px;
background-color:red;
display: inline-block;
}
.box2{
height: 200px;
width: 200px;
background-color:yellow;
display: inline-block;
position: relative;
}
.box2 h3{
position: absolute;
/* Working according to it's parent because it's parent div contains relative position now check it by given it left top and remove the position relative of box2*/
}