CSS：为什么h3下降其父div？

Question

有一个简单的例子， div 元素包含 h3 。
但是当 h3 具有相对位置时， h3 元素会降低其父 div 。
将 h3 位置更改为绝对可以解决此问题 是什么原因？

.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

.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 2

这是由vertical-align: baseline;元素的默认inline-block属性引起的。

使用vertical-align: top替换元素的默认值将使您获得正确的位置：

.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>

注意我说“某处就像是正确的”，因为你仍然会遇到元素周围空间的问题（请注意黑色方块下面的间隙和两个孩子div之间的空间）。但这超出了您的问题的范围，并且已经处理many times before。

Answer 3

可能是你熟悉所有的定位。首先，你需要了解它。在css中有四个可能有用的定位，如下所示。

静态

相对

绝对

固定

- 静态定位：

 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.

位置：静态的;

<强> - 相对

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 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;

任务：现在，制作一个父div，它是两个孩子的，检查相对和绝对。

/ *示例* /

        

    </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;

/ *根据它的父级工作，因为它的父div包含相对位置现在通过给它左上方检查它并删除box2的相对位置* /

}