图像在标题上没有标题向下移动

Question

我有兴趣将我的安全帽图标部分“放在我的标题顶部”，而标题容器不会向下移动。对不起描述不好;这是一个（可怕的，我不是一个体面的图形设计师）我的意思的基本形象：

任何帮助将不胜感激。摆弄代码：

http://jsfiddle.net/QFV48/

.container {
    width: 570px;
    margin: 0 auto;
    padding-top: 75px;
}

.hard_hat {
    z-index: 2;
    width: 75px;
    height: 75px;
}

#header {
    background-color: #1173F2;
    width: 550px;
    padding: 10px;
    border: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    text-align: center;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 30px;
    z-index: 1;
}

.wrapper {
    background-color: #fff;
    width: 550px;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
}

谢谢！

Answer 1

我建议将安全帽图像更改为CSS背景图像，因为它对内容并不重要。

删除CSS中的IMG和.hard_hat选择器，然后添加以下内容：

#header {
    position: relative;
}

#header:after {
    background: url('//cl.ly/image/1d3v1S3K0u2L/hard-hat.png') no-repeat;
    content:"";
    top: -20px;
    left: -20px;
    width: 75px;
    height: 75px;
    position: absolute;
}

Example on JSFiddle.

Answer 2

一种简单的方法是让你的容器div位置：相对，然后绝对定位你的图像。像这样： http://jsfiddle.net/QFV48/3/

.container {
    width: 570px;
    margin: 0 auto;
    padding-top: 75px;
    position: relative;
}

.hard_hat {
    z-index: 2;
    width: 75px;
    height: 75px;
    position: absolute;
    top: 40px;
}

Answer 3

调整边距以将其移动到＆＃34;标题，然后向左移动一点：

.hard_hat {
  z-index: 2;
  width: 75px;
  height: 75px;
  margin-bottom: -40px;
  margin-left: -20px;
}

示例：http://jsfiddle.net/QFV48/5/