CSS position, div inside div specific position

Question

I am making one design for my application and I want put notification, please see my jsfiddle and picture with description, I want put div inside div but with specific position, I was try with absolute, relative but without success.

http://postimg.org/image/wrpw3qhvd/

<div class="kocka">
    <span class="fontawesome-save"></span>
    <div class="circle">12</div>
</div>

Answer 1

Here is a fiddle

So, there are a few ways to do this. They both require some understanding of positioning. First off, note that the divs are position:static; by default. The window itself, is relative be default. It's tricky when you say it, but things that are positioned absolute are really absolutely placed, relatively to their closest position:relative parent. So, if you want to place the red thing, based on the orange things boundary, you need to make the orange thing relative, so that the red thing knows it's new set of boundaries(not the window). Then you can use absolute positioning.

The 2nd example, uses just relative positioning, which changes the way it thinks about itself in the flow. When you make something relative, it's now positioned based on it's place in the flow, so you can scoot it around, but it will still hold it's original spot... so for this example, you get the red thing floated in the upper left corner of the orange thing as a starting point... and then scoot it a bit. But in retrospect, since I stripped your font and css - this might not work for you, but I wanted to demonstrate it as another way. I don't see people using it much but it is very handy. Think about that classic 3 tier price table everyone makes, with the 'best deal' in the middle and a little higher up...

I know that could be explained better. When you make something relative, it becomes like a boundary to things within it. When you make things absolute, that means they are positioned to the boundary of the nearest relative.

HTML

<div class="logo logo1">
    <div class="alert alert1"></div>
</div>

<div class="logo logo2">
    <div class="alert alert2"></div>
</div>

CSS

.logo { /* set up size etc */
    width: 60px; 
    height: 50px; 
    background-color: orange;
}

.alert { /* set up size etc */
    width: 30px; 
    height: 30px;  
    background-color: red;
}


/* absolute way */
.logo1 {
    position: relative;
}

.alert1 {
    position: absolute;
    top: -8px;
    right: -8px;
}


/* relative way */
.logo2 {
    /* nothing needed in this case*/
}

.alert2 {
    float: right;
    position: relative;
    top: -8px;
    right: -8px;
}

a fiddle with fonts

AND one more I made for myself to save: http://jsfiddle.net/sheriffderek/w337s/

Answer 2

Make the parent div relative, and the child div absolute.

.parent {
    position: relative;
}

.child {
    position: absolute;
}

<div class="parent">
    <div class="child"></div>
</div>

Whatever top and left value u give to .child will now be relative to .parent.