CSS如何改变父元素的溢出？

Question

How can i place div on an img element? Also i would like to do it slightly outside.

I have something like this:

<div class="slide">
    <div class="arrow">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque ex eget ultricies blandit.</p>
    </div>
    <img src="http://boallen.com/assets/images/randbitmap_true.png">
</div>

And here is my css style:

    .arrow {
        max-width: 300px;
        background-color: #FAFAFA;
        position: absolute;
    }
    .arrow:after {
        left: 100%;
        bottom: 0px;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-width: 15px;
        border-bottom: 30px solid #FAFAFA;
        border-right: 30px solid transparent;
    }

So how can i do this? to place my arrow div on an image slightly outside? and i don't want to set the image as background i need it to be in the img tag.

@update

keep in minde i dont want to change style of .slide element. and i have overflow: hidden; so how to make my arrow element to not be hidden ?

check it here: http://jsfiddle.net/pyx3zx25/9/

how to change overflow of parent element?

Answer 1

You have given position absolute to the arrow div. when you give top and left value to that; you can position it any where on the image. try the below value,the div with text come inside the image,adjust the values according to your need.

.arrow {
            max-width: 300px;
            background-color: #FAFAFA;
            position: absolute;
            top:200px;
            left:100px;
}

you can add top:10px; left:0px; i think those values will give you desired result

Answer 2

Just use the 'negative value' on top and left.

  .arrow { max-width: 300px; background-color: #FAFAFA; position: absolute; top:-10px; left:-10px; } 

Answer 3

You can try it.

    .slide{
        position: relative;
        height: 521px;
        width: 521px;
    }

   .arrow {
            max-width: 300px;
            background-color: #FAFAFA;
            position: absolute;
            top:40%;
            left:20%;

    }

Update