CODEWITHSUNDEEP
css
Rápli András
Rápli András

Reputation: 3923

Absolute positioning out of div

I have

<div id="content" style='position:relative; overflow:auto;'><img id="d"/></div>

#d is just some design element, which should be in that place on the picture below. Whatever I try, it does not show.

The CSS I've tried so far:

display:block;
position:absolute; 
margin-left:-10px; 
left:-10px; 
z-index:999;

illustration

Upvotes: 0

Views: 73

Answers (4)

Sachin
Sachin

Reputation: 40970

If you want the absolute positioned element to be placed outside of the parent, then you can set the left as -ve value like left:-35px; and with similar +ve value of margin-left of parent container.

You can try this CSS

#content{ 
    position:relative;
    height:200px; 
    background:black;
    margin-left:35px
}

#d{
    display:block;
    position:absolute; 
    left:-35px; 
    z-index:999;
    background:red;
}

with markup

<div id="content">
  <img id="d" />
</div>

Js Fiddle Demo

Upvotes: 1

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

add top attribute

This is what I have tried and works you have to set left like the -width of your image

<div id="content" style='position:relative;  width:200px; margin:0 auto; background:black; height:100px;'><img id="d" src="http://placehold.it/50x50"/></div>


#d{
    position:absolute; 
    left:-50px;  //width of image
    top:0;
  }

DEMO

Upvotes: 1

greko
greko

Reputation: 225

Small code - fiddle http://jsfiddle.net/52YtG/

<div class="mainDIV">
    <div class="miniMe"></div>
</div>

css

.mainDIV {
    position:relative;
    left:20px; { or to make a space for element - margin-left:20px; }
    top:20px;
    width:300px;
    height:300px;
    background:blue;
}
.miniMe {
    position:absolute;
    top:0px;
    left:-10px;
    width:10px;
    height:10px;
    background:red;
}

Upvotes: 0

Dropout
Dropout

Reputation: 13866

The element should be placed outside, if it's supposed to be outside - let's try to avoid negative margins, etc..

Try setting a top to your element as well - relative and absolute positioning has to have both vertical(top/bottom) and horizontal(left/right) setting.

Upvotes: 1

Related Questions