I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).
Related
I built a slider with 8 different pictures.
On each picture, I wrote a caption.
I'm trying to set this caption with the css code :
.tp-caption{right:5%}
My ".tp-caption" div is out of my screen.
I read that the 5% are relative to the parent element properties.
And in my case the parent element is my picture wich is larger than my window's width (picure is centered)
Do you know if I can specify 5% of my window screen ?
I tried with margin-right, float:right too ... but it's always the same problem
thank you for your help
The right property is applied to positioned elements only, as stated on the MDN docs
So, for right to be effective, your caption element would have to contain one of the position's values, like relative, absolute or fixed.
It's true, the right offset will be relative to the element's parent. if you want it to be relative to the window's viewport, you should use then the position: fixed on the element, that removes the element from the natural flow of the document, and makes it subject only to the viewport.
To move the position of an image to a certain part of my website, ive put the image in a div tag and used relative position to get it to the place i want it. This works fine for where i want the image to be positioned however there is a downside that it leaves white space behind where it previously use to be and in that space nothing is occupied and it makes the website look ugly. Is there a way to remove that space that it left behind?
as stated above, you should position the element absolute instead. When positioning relative, the element is still within the document flow and therefore occupies its original place in the document. Positioning absolute will remove the element from the flow and make the space available for other elements.
Use absolute positioning instead.
JSFiddle
How can I get the 'Tree' to be positioned at the top inside the second row?
I have read some sources on this, some claiming that fixed is positioned relative to its outer container, other relative to the browser window. On position:absolute, I've read that it's relative to the browser window, but w3schools claim that it's relative to the first positioned element. All of this is making my head a little fuzzy, and despite playing around with both properties I have not been able to really get my head around this.
position:fixed always refer to the browser window. A fixed positioned element won't change it's position when scrolling the browser window.
If you want a relatively positioned element inside another element, you must give the container (parent) element a position:relative;, and the element inside it a position:absolute;. This way the absolutely positioned element coordinates will be based on the parent (relatively positioned) element.
Also, when trying to use absolute and relative positioning for a layout, it's better not to use tables.
Update
The absolute positioned element will search through the DOM tree, looking for the nearest ancestor that is positioned as well. If it finds none, it will position itself relative to the browser window. – Justus Romijn
Update 2
just give position:relative; to the td containing the absolute positioned element, like this
http://jsfiddle.net/E2gYN/5/
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.
What is the difference between relative and absolute tags of div element ?
Absolute positioning positions an element relitive to the first parent that has a position oher than static, and removes the element from the document flow. Relative positioning allows you to move an element from its "normal" positon, leaving the space where it was originally in the content.
Relative is generally for small adjusents in page layout, absolute is for exact positioning.
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. The div stays within the flow of the document, but just moves relative to the position that it is specified at within the document.
When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. It's not relative to the place you where the div actually occurs in the document.