How should children with position: relative behave inside of a parent that has position: absolute?
For example (JSFiddle):
<div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;">
<div style="position:absolute; top:0; right:0; width:200px; height:300px;">
<div style="position:relative; top:0; left:0; width:500px; height:100%;"></div>
</div>
</div>
When I shrink the browser window below the max-width the inner div moves outside of its parent element. Is that normal behavior?
Try changing a few things. First, give your first div an actual height rather than just 100%. Second, try making the child element fit within its parent. Right now it's a 500px div inside a 200px div. It might be better positioned outside the parent for this specific task.
Taken from : http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Relative [...] What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. [...]
Related
example
I know this will be really simple but I'm stuck sorry.
I have a centered page with a width (the grey area in my example) and I want to have block behind it that is full width (the red area in my example).
The page needs to have a slight margin at the top to show the block behind it.
How can I have a full with block and have a page positioned on top.
I have it looking something like I want but thats with negative margin on the page area
You can use position absolute. But dont work with pixels. It is bad idea for mobile devices.
These code aligns div to center.
left:50%;
transform:translate(-50%,0);
.top{
width:100%;
height:100px;
background:red;
}
.inline-class{
height:200px;
width:90%;
background:grey;
position:absolute;
top:50px;
left:50%;
transform:translate(-50%,0);
}
<div class="top">
</div>
<div class="inline-class">İnline Class</div>
You could use position: absolute to position one element over another.
.page {
position: absolute;
left: 5%;
top: 50px;
}
position: absolute positions your element relative to it's first ancestor, so it basically ignores the position of it's siblings.
All:
Thanks for help.
The html structure is like:
<div id="container" style="position:relative; top:100px; left:100px; width:200px; height:300px; overflow: auto;">
<div id="absoluteinner" style="position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:red;">
</div>
<div id="staticinner" style="width:100px; height:800px; background-color:purple;">
</div>
</div>
I thought that absoluteinner can keep a fixed position relative to its container, but when I scroll the container, the absoluteinner moves as the staticinner. How can I make it position fixed?
Look at the jsfiddle I created for you. Just give it position fixed, if you don't set top and left explicit, it will inherit for the parent, making it fixed for the parent and not for the window. So look at the css I wrote.
Remember if you set explicit top and left offset it will be referenced to the window, but if you make this trick, inherit from the parent and instead of using top and left you use margin-top and margin-left you will have your element fixed to the parent element and the offset given by the margin.
http://jsfiddle.net/carloscalla/q6ffnm09/
body{
margin: 0;
}
#absoluteinner{
position: fixed;
margin-top: 10px;
margin-left: 10px;
top: inherit;
left: inherit;
}
NOTE: margin: 0; of body is just to correct the margin given by the jsfiddle.
UPDATE: What you want to achieve can not be done with the html structure you have right now. You will have to wrap up your container in another div and inside this div put your #absoluteinner so #absoluteinner and #container are siblings. Then you give the parent position: relative; , and your #absoluteinner position: absolute; , but #absoluteinner does not get into the #container scroll, they are separated but you simulate that they are one inside of the other one.
I created an extra #outter-container so you see another scroll and you see that #absoluteinner is "fixed" to #container.
If you use position fixed you will not be able to achieve this since position fixed takes the element out of flow, you can get that working for the basic scenario as the first answer I gave you but not for what you want to do if you want to insert this piece of html inside another containers.
Take a look at this jsfiddle I created for you: http://jsfiddle.net/carloscalla/gwphpfgy/4/
See the
<div id="container-wrapper" ...
this wraps up your container so you simulate a position fixed but this works inside other containers as well, as this sticks to the wrapper. Note the z-index: 1; just because it was going behind the purple box, you can avoid this by reordering the html structure but this is not a big deal.
I'm not quite sure wether i understood your question correctly, but I think, you can make its position:fixed and use margin to push it into the container.
Place absoluteinner inside of another position:absolute div and change absoluteinner'sposition to fixed. Then style the outer div with the position you want, relative to the parent, not the page. Do not put any position on the fixed element.
<div id="container" style="position:relative; width:200px; height:300px; overflow: auto;">
<div style="position:absolute; top:10px; left:10px; width: 100px;">
<div id="absoluteinner" style="position:fixed; width:100px; height:100px; background-color:red;"></div>
</div>
<div id="staticinner" style="width:100px; height:800px; background-color:purple;"></div>
</div>
JSFiddle
This is a snippet of the code
<div id="container">
<article>
<p>contents</p>
<img ... />
<footer>meta data</footer>
</article
</div>
#container{
width:960px;
}
article{
width:640px;
}
footer, img{
width:960px; /*well I may want it 640px but float right all the way back to the edge of #container*/
}
The footer and image do not take that width; I tried the position:absolute and it works, but they go to the top, even when I add position: relative to the container.
Normally I would close the article tag, add the image, and then start with the article. This is not an ideal solution.
First thing is that they need to be block or inline-block to accept a width. Floats could cause weird wrapping. You could try overflow: visible to see if it helps.
You are on the right track with positioning. You want to set the container to relative and then the inner element set to absolute, pinned to the top right corner:
#container{ width:960px; position: relative; }
img, footer{ width:960px; position: absolute; right: 0px; top: 0px;}
An absolute positioned element is relative to its first positioned ancestor, so the inner element is positioned based on #container.
This question already has answers here:
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 5 years ago.
I'm reading this article about position, and I don't understand why in this example the relatively positioned div is affected by the BODY, yet the absolutely positioned box ignores it? Aren't they suppose to behave the same when they are positioned inside another element?
the CSS:
body {
display: block;
margin: 8px;
}
#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}
Basically you have four position states, which are as follows:
static (default)
relative
fixed
absolute
The difference between relative and absolute is that relative is "relative" to itself (left:15px will pad it to the left with 15px), but absolute is relative to its parent (first non-static parent that is) and applying the same attribute (left:15px) will result in it being shifted 15px away form the left edge of the parent element.
This is actually a fascinating study and will help immensely in understanding web layout.
Here is the easy explanation of position: absolute and position: relative.
With absolute position, we can move an html element anywhere on the page.If we do not define any position element then it will take position from body element otherwise it will take it's position from the nearest defined position element.
Below is the example.
In this case, 'div2' takes the position from 'div1' element.
<div id='div1' style="position: relative; left: 100px;top: 10px;">
<h1>This is the first position element</h1>
<div id='div2' style=" position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>
In this case 'div2' takes position from body elements as no position is defined.
<div id='div1'>
<h1>This is the first position element</h1>
<div id='div2' style=" position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>
With relative position, an html elements can move from it's normal
position.Below is the example.
In this case it will move from it's postion 10px left and 10px below.
<div id='div2' style=" position: relative;left: 10px;top: 10px;">
<h2>This is a heading with an absolute position</h2>
</div>
absolute is the best for doing the page layout. it should have the top left right and bottom imported by CSS. and the relative is done without any tag from CSS
In example shown:
well, for relative there is no top/bottom/left/right for relative, so it stays where it should stay. (body has its own margin and padding defined by browser, which you can override).
for absolute, we have top and left, so it goes a little up, as it ignore any other items.
The explanations and descriptions explained above are well but for a normal person or a beginner it is difficult to understand.
Its simple.
Relative: Relative is similar to no positioning. Even if you haven,t used relative , and you make a div appear just like this:
margin-left:10px;
It would move to the left having space of 10px;
And similarly if you do like this:
position:relative;
margin-left:10px;
It would be same as no relative was used.
And if absolute is used for some other div in same sequence:
position:absolute;
margin-left:10px;
The it would move a total of 10+10=20px margin-left.
Because 10px of the second div of absolute and 10 px of relative div id is added in it.
It is similar to doing:
#div1{
float:left;
margin-left:10px;
}
#div2{
float:left;
margin-left:10px;
}
There is a narrow DIV which contains a much wider DIV. How do I center the child DIV horizontally within the browser window (and not the parent DIV) such that the left and right margins are equal?
<div id="narrow_container" style="float:left;">
<div id="wide_contents">
</div>
</div>
Possible CSS:
<style>
#narrow_container {display: block;
width: 600px;
margin: 0 auto;
} /* narrow div, this can be anything except position: relative */
#wide_contents {position: absolute;
width:400px;
margin-left:-200px;
left:50%;
} /* screen-centered div */
</style>
You're basically then just positioning the element absolutely relative to the window, since absolute positioning positions relative to the closest parent with position: relative. If you don't have any parents with position: relative, it will default to the document body.
The technique for centering is reasonably common and makes use of a negative margin that is as wide as half of element's width, and then positions the element 50% from the left. This results in a horizontally centered element.