CODEWITHSUNDEEP
htmlcss
sun
sun

Reputation: 1668

how to make a div to locate at top corner of another div?

Hi i am planning to make a div to place at the top right corner of another div

.another
{
   position:fixed;
   padding:09px;
   margin:auto;
   left:25%;
   width:auto;
   height:auto;
   background:#ffffff;
   z-index:999999;
}
.topcorner
{
   float:right;
   position:fixed;
   left:25%;
   z-index:99999999;
}

this is my html

<div class="another">
    <div class="topcorner">
        i am at top right corner
    </div>
    here is some other content
</div>

How to make topcorner div to place it in top right cornerenter image description here

Upvotes: 2

Views: 863

Answers (5)

Sowmya
Sowmya

Reputation: 26979

Use position:relative to parent div and absolute to child div

.another{
    position:relative;
    border:blue solid 1px;
    height:200px;
    background:#ffffff;
}
.topcorner{
    background:red;
    width:30px;
    height:30px;
    position:absolute;
    top:0;
    right:0;;
}

DEMO

Upvotes: 6

Andrea Ligios
Andrea Ligios

Reputation: 50241

You must use a non-static position (static is the default, then applied when no position is specified) to the container (relative, absolute or fixed); then you must apply absolute position to the child element.

Using left, top, right, bottom you can set the child object's starting points (in your case, right and top), and eventually the height and the width.

Please note that with absolute *position*, the element will be removed from the flow, and it would not be recognized as a consistent object in the page anymore; this means that the container content will flow under it how if the child element would not exist.

Demo: http://jsfiddle.net/pBS68/

CSS Code:

.another {
    padding:9px;
    margin:0 auto;
    width:50%;
    height:200px;
    border: 1px solid silver;
    position: relative;
}

.topcorner {    
    position:absolute;
    right: 0;
    top: 0;
    width: 100px;        
    border: 1px solid red;
}

Upvotes: 3

Roy Sonasish
Roy Sonasish

Reputation: 4609

try this,

.another
{
    position:relative;
    padding:09px;
    margin:auto;
    width:auto;
    height:200px;
    background:#eee;
    z-index:999999;
}
.topcorner
{
    position:absolute;
    top:0;
    right:0;
    z-index:99999999;
    width:100px;
    height:auto;
    background:yellow;
}

jsFiddle File

Upvotes: 5

Andrew
Andrew

Reputation: 21

Z-Indexs probably not needed there, at least for the .another box.

The inner box won't ever make the exact top right with the padding set on .inner.

Try removing the padding and see if that gets you what you want. Change the Z-Indexes to something sensible, like 0 for .inner and 10 for the other box.

Upvotes: 2

Ryan de Vries
Ryan de Vries

Reputation: 686

put in your css Top:*the pixels you want, can also be in minus"-"*; and Right:*the pixels you want, can also be in minus"-"*

This should do it

Upvotes: 1

Related Questions