Menu
The Problem
I have a container within another one. The rule display: inline-block; on the outer container is a given. I want that the content of the inner container ends where the content of the outer one starts. I tried using left: -100%; but naturally it moves the content only as far as the outer container is wide. The use case: The inner element will be a tooltip shown on hover aligned on the left side.
How can I got both elements aligned after each other and not overlapping without using JavaScript?
HTML
<div>
Short content
<div>This is very long test sentence.</div>
</div>
CSS
div {
position: relative;
display: inline-block;
margin: 40px 200px;
background: rgba(123, 234, 345, 0.7);
}
div > div {
position: absolute;
top: 20px;
left: -100%;
margin: 0;
background: rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
Demo on jsFiddle
Demo
806
Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
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.
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static ).
Try using right: 100%; instead of left: -100%;. Like so:
http://jsfiddle.net/dkv9W/1/
158
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
