We Keep Coding

JS get the position of element based on the body when position absolute on element

I need to build a tooltip, but I need to position the tooltip based on the body because its position is absolute and I don't want any relative parent to break my style.
<div style="position: relative;">
<input>
<p class="tooltip">tooltip</p>
</div>
I need the tooltip to be on the input but always relative to the body.
How can I calc this?

Elements with position: absolute are always realtive to the first parent Element with relative. (or anything except static and fixed)
So to fix it you need to avoid using position: relative on the parent
<div>
<input>
<p class="tooltip">tooltip</p>
</div>
or since it's anyways absolute positioned move the tooltip out of the relative element.
<p class="tooltip">tooltip</p>
<div style="position: relative;">
<input>
</div>

Using position:absolute; should position the tooltip relative to the nearest positioned element—in this case, the div marked position:relative;. (See the CSS3 reference on absolute positioning.)
So in your example, you don't need to worry about any parent elements with relative positioning, as they shouldn't affect the absolute positioning context. You should be able to simply use:
<div style="position: relative;">
<input>
<p class="tooltip" style="position:absolute; top:0; left:0;>tooltip</p>
</div>
Unless I'm misunderstanding your question, in which case, please provide more detailed examples.
EDIT:
If you're trying to avoid using position: relative, you can set the tooltip position with javascript:
var input = document.getElementById('input-id');
var tooltip = document.getElementById('tooltip-id');
tooltip.style.left = (input.offsetLeft)+'px';
tooltip.style.top = (input.offsetTop)+'px';

change class to style:
<div>
<input>
<p class="tooltip" style="position:relative;">tooltip</p>
</div>

Can I make a link fill its parent without using display:block or display:inline-block?

See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?

Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.

I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/

You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Setting Outer Div to Fixed, but maintaining relative position on inner div

I have two nested divs.
<div style="position: fixed">
<div style="position: relative">
</div>
</div>
When I set a fixed position to the outer div, all of the elements in the inner div lose their desired positioning. Can I maintain the order of the elements inside the inner div while still having the outer div set to a fixed position?

Vertical align absolute positioned div

I have two elements; input field and div - one next to another. Div is absolute positioned inside the relative element and positioned to the right of the input.
Input has fixed height, but div's height depends on the content.
What i would like to achieve is to middle vertical align div next to input. I am not sure if this is pure CSS possible, so thats why i added the javascript tag.
HTML:
<td>
<input type="text"/>
<div id="rel" style='position:relative;'>
<div id="content">
content
</div>
</div>
</td>
CSS:
#content {
position:absolute;
left:30px;
}
...

Just use
td input {
vertical-align:middle;
}
Good you already have a table, vertical centering via CSS is not easy.
Btw: Instead of two divs and absolute positioning, you might use margin-left: -30px;

Placing a div exactly above a moving div

I am customizing jquery-ui slider(range). The two corner points(div) are draggable. I wish to place the exact value of the slider just above the corner points but i am unable to do So, can anyone suggest how the position of the div containing the current values can be changed using javascript ?

I'd do it using CSS - make the value div a child of the slider div, then use position: relative on the value div with a negative top
<div id="Slider">
<div id="Value" style="position: relative; top: -100px; width:...">
</div>
</div>