CODEWITHSUNDEEP
htmlcss
JGeer
JGeer

Reputation: 1852

Display inner div above outer div

Inside a inner div I have some content, that I want to display over and outside the outer div.

I'm looking for a css class to display the content above all other content. I thought to fix it with css overflow, but I can get it fixed.

It is because of the padding left and right. And should be displayed over the padding-left of the div with class "item".

What class do I need to use?

CODE:

<div class="item product col-sm-3 product-display-standard item-animated" style="padding-right: 15px; padding-left: 15px">
    <div class="tooltip fade top in">
        <div class="tooltip-inner">TEXT</div>
    </div>
</div>

Upvotes: 2

Views: 2424

Answers (2)

Florin Pop
Florin Pop

Reputation: 5135

You can do it by setting the position to relative of the inner div and then changing the top property to be -(val)px. HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

.outer {
    width: 100px;
    height: 100px;
    margin-top: 200px;
    border: 1px solid green;
}

.inner {
    width: 50px;
    height: 50px;
    border: 1px solid red;
    position: relative;
    top: -80px;
}

Here is the jsFiddle.

Upvotes: 0

ashkufaraz
ashkufaraz

Reputation: 5307

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

CSS z-index Property

Upvotes: 1

Related Questions