Menu
So, I have my parent element positioned relative, in order to allow a tooltip element to be positioned absolute inside, at the top of it. I am aware that you are required to add "left: 0, right: 0", so that the width of the element is still able to be set to auto, which I have done. However, my parent element has a fixed width, which the tooltip becomes restrained to, so the auto width cannot go outside of it, is there any way around this?
CSS:
.parent { position: relative; width: 100px; height: 100px; } .tooltip { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; text-align: center; width: auto; padding: 5px 10px; } Elements:
<div class="parent"> <div class="tooltip">Text goes here</div> </div> No JS please, looking for a CSS solution, thanks!
222
Absolute In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Not setting both left and right on .tooltip, and setting white-space: nowrap should do it:
.tooltip { position: absolute; top: 0; left: 0; margin: 0 auto; text-align: center; width: auto; padding: 5px 10px; white-space: nowrap; } Working example.
You'd need to use this solution to center an absolute element. It does require an additional element, though. Demo
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
