Menu
Absolute positioning In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static ).
Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.
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.
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
I have an absolutely positioned block of text inside a relatively positioned container. The absolutely positioned element exceeds the right boundary of its container.
The problem is: the text isn't wrapping as normal; it's breaking prematurely rather than expanding to its defined max-width:
Observed behavior:
Desired behavior
HTML/CSS (JSFIDDLE: http://jsfiddle.net/WmcjM/):
<style> .container { position: relative; width: 300px; background: #ccc; height: 100px; } .text { position: absolute; max-width: 150px; left: 290px; top: 10px; background: lightblue; } </style> <div class="container"> <div class="text">Lorem ipsum dolor sit amet</div> </div> Note: A couple changes that appear to achieve the desired behavior, but which aren't quite what I'm looking for, include:
min-width: 150px on .text (the text might just be one word, and I don't want the container to be oversized).text. relative to document, rather than to .container (it needs to appear beside the container, even when the browser is resized)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