CODEWITHSUNDEEP
htmlcss
Canna
Canna

Reputation: 3804

html absolute position inside absolute

Quick Example,

html,

<div class="firstdiv">
    firstdiv
    <div class="seconddiv">
        seconddiv
    </div>
</div>

css,

.firstdiv{
    width: 200px;
    height: 200px;
    position:absolute;
    top:100px;
    left:100px;
    background-color:pink;
}
.seconddiv{
    position:absolute;
}

fiddle, http://jsfiddle.net/32pj4y16/

I want the seconddiv x,y axis, not to be related to firstdiv.

I want the seconddiv, starting from the x: 0px, y:0px;

but in here, it recognize the (0,0) is starting at the firstdiv part.

Upvotes: 0

Views: 349

Answers (4)

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4454

Actually It is possible with scripting.

If you don't want to alter ur structure go with this :)


Here are the steps to achieve what you want:

  1. get the top and left position values of seconddiv
  2. subtract the top and left values of seconddiv from firstdiv top and left values
  3. set the top and left position values of seconddiv

Example:

  1. consider secondTop=50px; ( top value of seconddiv ), secondLeft=50px; (left value of seconddiv)
  2. from ur code snippet firstTop=100px and firstLeft=100px So let x=50-100; ( secondLeft-firstLeft ) y=50-100; ( secondTop-firstTop)
  3. set 'x' value as 'left' value and 'y' value as 'top' value of seconddiv

JSBIN Example: http://jsbin.com/hofalicohisu/1/edit

Upvotes: 1

himanshu
himanshu

Reputation: 1797

if you want to make them move freely do thisjsfiddle

<div class="container">
<div class="firstdiv">
    firstdiv

    </div>
    <div class="seconddiv">
        seconddiv
    </div>
</div>

Upvotes: 1

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

You need to specify position for your seconddiv. Try this:

.seconddiv{
   position:absolute;
   top:-100px;
   left:-100px;
}

Upvotes: 0

flowstoneknight
flowstoneknight

Reputation: 1236

An element with position: absolute will use the its closest positioned ancestor to determine its own position. So in your case, .seconddiv will always use .firstdiv as its context for positioning.

What you can do is add top：-100px and left: -100px to .seconddiv, making it move to the top left, out of .firstdiv.

Here's how it'd work, based on your fiddle.

Upvotes: 1

Related Questions