I have following code with a div #letmeout in it. Due to the outer <div> having position:relative and overflow hidden; set, the #letmeout div is not displayed. I need to display #letmeout without modifying the outer <div>.
<div style="position: relative; overflow: hidden;">
<div id="letmeout" width="100%" height="1000px" style=".....">ok</div>
</div>
I tried adding an inline style background:red; position: absolute; z-index: 10000; color:blue; left: 0px; top: 0px; height:10000px; display:marker; overflow:auto; margin:0px; but #letmeout is still not shown. How can I do this without modifying the outer div and only using inline styles on #letmeout?
By assigning relative positioning to the parent you "locked" the sub (child) into the parent container.
If you really need a screen takeover (as your code suggests) #letmeout { position:fixed; } may help. Be warned though, fixed positioning doesn't act like absolute or relative. fixed elements take their position based on the viewport.
Check it out: http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning
You will also find explanations to your positioning and float options at that URL as well.
Related
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
Situation
html:
<div class="container">
<div class="parent">
<div class="child">x</div>
</div>
</div>
css:
.container {
display: table;
}
.parent {
display: table-cell;
position: relative;
}
.child {
position: absolute;
right: 0;
}
What I expect:
the .child should be positioned to the right edge of .parent. Works in Chrome.
What I get in Firefox:
the .child is positioned to the right edge of the closest "non static" parent which is has not display: table-cell.
Fiddle
http://jsfiddle.net/SYG5k/2
Question
Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?
You need to put position: relative; in your parent.
So in the code in your question add position: relative; to .container
Or in your jsfiddle add position: relative; to .parent
.parent {
height: 150px;
width: 450px;
display: table;
margin-top: 400px;
background: #bbb;
position:relative;
}
Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox
About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).
See this to understand deeper about 'tables' behaviors
http://jsfiddle.net/SYG5k/12
Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element
http://jsfiddle.net/SYG5k/13/
<div class="rel">
a
<div class="absolute">x</div>
</div>
.foo, .rel {
position: relative;
}
This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you
Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above
A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;
HTML:
<div class="parent">
<div class="cell foo">
<div class="cellInner">
a
<div class="absolute">x</div>
</div>
</div>
CSS:
.cellInner{
position:relative;
width:100%;
height:100%;
}
Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/
I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.
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.
I need to set a child div as fixed (position: fixed) in relation to its parent div. The parent div is set as overflow: auto.
Just to make my point very clear: I don't want the child div to be fixed in relation to the HTML screen, but in relation to the parent div. The parent div scrolls, because it is set as overflow: auto. It has a lot of text, which causes the scrollbars to appear (not the screen scrollbars, but the div's). I need the child div to hold a fixed position in relation to its parent div.
Is there a pure HTML+CSS solution for this, or is it only possible to achieve through javascript?
I see what you're saying... basically this is the problem. With fixed position you get the element to stick there while you scroll but that has to be relative only to the window. If you try to make it relative to the container with position:absolute, it doesn't stick but scrolls with the content... the solution? a wrapper of course! :D
basic structure is this:
HTML
<div class="blah">
<div class="inner">text content</div>
<div class="meh">fixed content</div>
</div>
CSS
div.blah
{
position:relative;
}
div.inner
{
width:500px;
height:500px;
overflow:auto;
}
div.meh
{
background-color:#f00;
position:absolute;
left:20px;
bottom:20px;
}
enjoy :)
Its kinda tricky to say without looking at HTML, but you can try :
.child {
position: absolute;
top: 0; /* or any other value */
left: 0;
}
.parent {
position: relative;
}
You also need another child div to wrap your scrolling content.
I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.
#banner {
width: 700px;
height: 90px;
top: 60px;
left: 178px;
overflow: hidden;
text-align: center;
display: table-cell;
vertical-align: bottom;
position: relative;
}
<div id="banner">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>
But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?
My current solution is:
<div id="banner">
<table width="100%" height="100%"><tr><td valign="bottom" align="center">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</td></tr></table>
</div>
But I do not like this solution.
Short answer:
Change
top: 60px;
to
bottom: 60px;
Long answer:
The declaration position: absolute takes your element out from wherever it is and place it relative to innermost element that is not declared static. In no longer participate in the alignment of any other element, hence it no longer serve as table-cell (the declaration has no effect). Additionally, declaration such as top: 10px means to place it that much distance from the top of that containing element.
Declaring an element as position: relative makes declaration such as top: 10px means 'move the element 10px from the top from the current position'. It is possible for elements declared relative to overlap with other elements, although you should remember that the original position still determines the arrangement of other elements.
I hope this answer your question.
You could also try setting a position:relative; container, which makes the banner (the #banner position:relative; and the img position:absolute) then set the absolute position to be bottom:0, aligning it to the bottom of the container. If it's the whole page, just set the width and height of the container to 100%, and remove extra padding/margin on the body or on the div.