将DIV外部的2个图标定位到顶部

Question

我想要实现类似于下图的内容（2个图标，邮件和手机在我的文章DIV之外（图像上的白色），与DIV的顶部对齐并且在彼此之下（有1或2个）像素空间）。我试图为图像设置一个负边距的类，但没有成功。实现这个的最佳方法是什么？ 非常感谢

.article {
    clear: right;
    float: right;
    text-align:justify;
    width: 450px;
    min-height:420px;
    height: 60%;
    padding: 50px 32px 49px 62px;
    margin-right:75px;  
    position: relative;
    z-index: 15;
    margin-top: 90px;
    background: #fff;
    /* max-width: 25%; */
    overflow-y: scroll!important;
}

Answer 1

我会在文章上使用position: relative，并在图标集上使用position: absolute定位（为简单起见，我使用了ul）：

JSFiddle：http://jsfiddle.net/szLsH/

HTML code：

<article>
    <div id="icons">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac libero velit. Proin euismod erat non diam malesuada ac semper purus dapibus. Donec id suscipit metus. Ut eu auctor mauris. Proin sed felis dui. Maecenas congue dapibus dolor, sodales feugiat nisi feugiat ac. Nulla nec massa in mi pharetra sollicitudin. Aliquam eu dui quis odio porttitor viverra ut cursus dui. Nullam quis tristique magna. Aliquam erat volutpat. Suspendisse potenti. Pellentesque rhoncus commodo odio vitae tincidunt. Praesent rutrum, nibh vitae porta luctus, felis quam dignissim risus, non tempus lectus magna non odio. Donec commodo laoreet dolor ut volutpat. Ut lobortis lobortis augue, in placerat arcu dapibus et. Maecenas vitae lectus quis enim suscipit euismod.
    </p>
</article>

CSS：

article {
    width: 200px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
    border: 1px solid #AAA;
}

#icons {
    position: absolute;
    right: 100%;
    top: 0;
}
#icons ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#icons li {
    width: 50px;
    height: 50px;
    background: blue;
    margin: 0 5px 5px;
}