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.
Related
I'm having trouble with the order of layered DIV elements. I have a DIV .lens-flare that's at the bottom of the hierarchy in HTML. Yet when I transform: translate the position so it encompasses the entire parent DIV, it shows above elements that are above it in the hierarchy.
So I tried setting z-indexes, and then turned my translate into translate3d. Still I'm not able to get .lens-flare underneath .top-nav-bar, .nav-bar, or .cta.
Currently I have a pointer-events: none applied so I can at least click on the things underneath. But how can i actually move the .lens-flare layer under everything else successfully?
Here's my CodePen for the project
Elements rendered later are considered being closer to the screen than the elements rendered before them.
Z-index is the answer if you want to change this, you just need to remember z-index works only with elements that are positioned.
.lens-flare
position: relative
z-index: 1
.nav-bar, .top-nav-bar, .cta
position: relative
z-index: 2
Your corrected codepen: http://codepen.io/sEvher/pen/doyWoW
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
Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.
<div>
<img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
<p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>
div {
background: green;
display: inline-block;
}
my jsFiddle
Any advice is greatly appreciated
Change display property of div to table-caption
(Tested in firefox and chrome)
Updated jsfiddle
Here's the best that I've found:
http://jsfiddle.net/y8Qnd/3/
What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.
This would mean you would have to move up the DOM tree, as you want the image to determine it's parent width. Moving up the DOM tree is unfortunately not possible (yet).
As an alternative, you could position the text absolute, to lift it out of the document flow, and therefore not influence the width of it's parent div. This however would also mean that the height does not get influenced, which is probably not what you are after. You could mimic the correct height by repeating the parent background, but the content underneath would not get pushed down, so that is also not really an option I think. I set up an example anyway: http://jsfiddle.net/y8Qnd/2/
The only option I can think of is javascript. Get the width of the image and apply it to the parent container. In jQuery (I will probably get bashed for using jQuery for such a trivial thing, but I am just not used to writing 'old school javascript' anymore...) it would look something like this:
var $wrapper = $('div'); // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);
and an example: http://jsfiddle.net/y8Qnd/6/
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
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