I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
I am trying to implement a grid like layout of images with their corresponding title absolutely positioned relative to that image.
usually when the parent is positioned relatively, the child position absolute works perfectly. Not in this case :(( No matter what I've tried I cannot get this to work.
Sorry had to delete the code as images no longer available.
Michaels solution worked.
Your .hero div has an effective height of 0. Give this element a height and your absolute positioning will work as expected.
What I'm trying to do is literally as the question says, float a span outside of a table, but keeping the span tag within it (for per row reuse purposes).
My understanding was that I needed to use something like overflow: visible;, but this does not seem to be having the desired effect (it's currently everywhere in the fiddle below as I was messing with testing it, but I think if it was working, I'd only need it in the inner div (the one using divStyle2)?
http://jsfiddle.net/uVQHr/
You simply need to add position: relative to the span's parent <td>.
Here's an updated Fiddle.
The problem is not to do with overflow - you were positioning the <span> outside the viewport. If you had inspected the element using your dev tools you would've seen it positioned off the left edge of the screen. You can remove all the overflow: visible properties now too.
position: absolute positions the element relative to the closest parent element with a position attribute that's something other than static (default). Your code was positioning the span relative to the <body> as no element with a position was found.
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
Please look at this example http://jsfiddle.net/xcYum/1/
I want to know why is the div tag (with class=progress) the content is broken into two lines instead of just one line (i.e. your progress vs your\nprogress). I should NOT need to specify the width for the 'div class=progress'. can you please give me an explanation that has all the css and/or html element types (or boxing whatever reason) this happens? I just want to know exactly how the rules actually work, rather than memorizing cases it works or doesn't work.
it seems if i change the .container css to the following:
.container {
position: relative;
}
then the div tag (with class=progress) now displays in single line, why is relative and absolute make such difference? or is it because it is nested?
how do we avoid nested absolute positioned div tags?? is it wrong or bad practice to have such structure. i am using it in this example is because i want
'100%' and 'your progress' to be positioned based on 'div class=container' tag, then i can just move the 'div class=container' tag around. in other words, doing this way, i can just move one thing ('div class=container' tag) to make 2 things move (100% and 'your progress'), the other way around is more work. What is wrong with my thought process here?
Because an absolutely positioned element shrink-wraps, in other words, it becomes as small as possible. You can force text to never wrap using white-space: nowrap
Not sure why this happens
You don't need absolute positioning for an elements children to move with the parent
Absolute element establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.
Reference: http://reference.sitepoint.com/css/absolutepositioning
Same as first answer
Absolute element is positioned with respect to its containing block. So, you just need a parent 'div class=container' to have relative position and then all its elements with absolute position will move with it.
Reference: http://reference.sitepoint.com/css/absolutepositioning