Div or image appears only inside another

Asked

Viewed 553 times

1

I would like to put a div or an image ( preferably div, if possible ) inside another, for example, I wish Div didn’t appear outside the other, if I’m overtaking being behind.
inserir a descrição da imagem aqui

In the example below, it shows well what I want, the first image is behind Evaluation, only over the black part, already the bottom image, is over evaluation and duo, but I would like it to be below, or better, it only appears inside Internet, the evaluation only appears the part that is inside the box.

jquery html css html5 css3

  • I think this question has what you want. http://answall.com/questions/38215/quando-usar-position-absolute-ou-relative-em-css

  • In the crystal I could not find, I leave position Absolute and place smaller z-index in the image, but still it comes out of the other. :\

  • 1

    try using the overflow:Hidden property in the image above

  • I managed with this property, even someone had put a response, but disappeared kkk, but it was perfect with the overflow. Thanks guys!

  • I posted a correct answer so you don’t have to check the comments for a reply. Hugs

2 answers

2


In css include overflow:hidden and position:relative in the mother div, and play with the positioning of the elements (left, top, right, bottom). EX:

    div {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    .fita {
        width: 80px;
        position: absolute;
    }
    .fita:nth-child(1) {
        left: -20px;
        top: -5px;
        transform:rotate(-45deg);
    }
    .fita:nth-child(2) {
        right: -20px;
        top: -5px;
        transform:rotate(45deg);
    }
    .fita:nth-child(3) {
        left: -20px;
        bottom: -5px;
        transform:rotate(45deg);
    }
    .fita:nth-child(4) {
        right: -20px;
        bottom: -5px;
        transform:rotate(-45deg);
    }
<div>
    <img class="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png">
    <img class="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png">
    <img class="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png">
    <img class="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png">
    <img src="http://www.personal.psu.edu/jul229/mini.jpg">
</div>

<br>
<br>
imagens Reais:
<br>
<img src="http://www.personal.psu.edu/jul229/mini.jpg">
<br>
<img class="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png">

2

Use the property overflow:hidden, which defines what happens to the content of div if it "overflows" the size of the div

Browser other questions tagged jquery html css html5 css3

You are not signed in. Login or sign up in order to post.