I have this code : I'd like to put the span element menu_label
over the image, not at the bottom.
Dunno why it start to get the top and left from the bottom of the container (that is, with class menu
).
Any ideas?
The element can contain a piece of text or an image directly. So, when it is required to wrap a run of text (or an image) to be styled or manipulated and no other element is found suitable, the span is used.
The key is the container has to be positioned relative and the tag positioned absolute. Show activity on this post. You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
Add CSS. Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.
Change the position on the menu_label
to absolute and add position:relative
to menu
http://jsfiddle.net/uc8jc/2/
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