div浮动位置在图像上

Question

我的问题是，.figure字段为100％，但.recomddo没有位于.figure的角落，图像上没有位置，我想要的是.recomddo在位置img

如何使用jQuery或css实现此效果，我们非常感谢帮助

        figure.envoltura {
            position: relative;
            display: block;
            margin-bottom: 40px;
        }
        figure {
            margin: 0;
        }
        .page_img {
            border: 2px solid #ddd;
            background-color: #fff;
        	max-width: 100%;
        }
        .recomddo, .recomddo:before {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }
        .recomddo {
            position: absolute;
            background-color: #F1C40F;
            top: 10px;
            right: -10px;
            border-radius: 5px 5px 0 5px;
            font-weight: bold;
        }
        .recomddo:after {
            width: 0;
            height: 0;
            border-top: 10px solid #C19D0C;
            border-right: 10px solid transparent;
            content: '';
            position: absolute;
            bottom: -10px;
            right: 0;
        }

      <figure id="fig_solo" class="envoltura">
            <img class="page_img" src="http://placehold.it/350x150">
        	<span class="recomddo">1</span>
        </figure>

Answer 1

.recomddo {
    position: absolute;
    background-color: #F1C40F;
    top: 0px;
    left: 322px;
    border-radius: 5px 5px 0 5px;
    font-weight: bold;
}

希望这与你合作。