Title: How to make adorners in html?
Tags: html;css
Question: In WPF I can create adorners for elements. They are placed on a transparent panel and do not have effect on layout of other elements. They do not affect the width of container holding adorend element.Tooltip and popup are the example of adorners.
Adorners can be easily positioned relative to the adorned element.
I am trying to achieve the same in html with css.
I have two sequential elements
<span class="adorner"&gt;*</span&gt;
<span&gt;3</span&gt;
I want adorner to become positioned relative to span and not to participate in a flow of other static/relative elements, so in a case of:
<span&gt;1</span&gt;
<span class="adorner"&gt;*</span&gt;
<span&gt;3</span&gt;
first span should be adjacent to the third one (as if span with class='adorner' was not there) and adorner 'floats' somewhere.
With a static positioning it looks like 1*3, but I need 13 and * placed where I need it to be placed relative to 3.
Comment: Sorry, I could not understand what you are trying to achieve.

Comment: @giorgio `Somewhere` means that it is positioned (to the left, for example) relative to the sibling, not  parent.

Comment: @rafaelcastrocouto I added a picture to the question.

Comment: @DavidThomas I don't know what picture I should add more to make it clearer, than it is now.

Comment: Could you define `somewhere`? I can't totally grasp what you want to achieve ecactly. (Sidenote: closing tag has the slash _before_ the tagname, like ``)

Comment: Really hard to understand the question. Explain better. @Rob 's answer seems to be valid, even removed.

Comment: Your closing tags for `` are invalid. ``

Comment: Describe the end result you want, show a picture of it, give us something concrete to work with, or towards. Also, there's a a lot of "*I want*" in this question, what attempts have you made?

Comment: give us your HTML code and your CSS code please

Here is the accepted answer: I'm not entirely sure whether this will solve your problem, but it sounds like you're asking for absolute positioning relative to the "adorned" element. In order to achieve this, you'll need to change your element structure somewhat.
First of all, if you want element A to be positioned relative to element B, the simplest way to achieve this is to make A a sub-element of B. So this would give:
<span&gt;1</span&gt;
<span&gt;3
<span class="adorner"&gt;*</span&gt;
</span&gt;
This wouldn't solve your issue on its own though: you'd just get 13* instead.
Then you want to separate your adorner class from the standard flow. The most common way to do this is using absolute positioning
.adorner {
position: absolute
top: <whatever&gt;;
left: <whatever&gt;;
Of course, absolute positioning works relative to the first parent element that has positioning applied, so you'll need to set all spans (for instance) to have position: relative. If the location of the adorner relative to the adorned element isn't fixed, then you can use Javascript (or possibly something like Less) to dynamically determine the location of each adorner relative to their parent. If you want, you could also use javascript to determine dynamically whether an element needs the position:relative; based on the presence of an adorner child (this is easy to do with JQuery's has() functionality).
Depending on what other properties you want this adorner to have, there are other styles you might want to consider, like z-indexes, but this should solve the specific issue of relative placement outside of the standard flow.
Comment for this answer: I think the answer to that is yes: you can set the position conditionally but only really using Javascript as pure CSS doesn't have that sort of computational ability. Not quite sure what you mean about the `relative` tag: if you are asking whether this style can be applied conditionally based on the presence of an "adorner" child, then yes, that's also possible but more complicated than just applying it as standard to everything (which has few if any negative side-effects). I've added detail around that to my answer.
Comment for this answer: Oh, thanks. Found similar approach [here](http://www.w3schools.com/css/css_dropdowns.asp) and [here](http://www.w3schools.com/css/css_tooltip.asp)
Is it possible to set position of adorned element conditionally? I mean, we need `relative` only if its effective style without applying this one yields static.Otherwise we do not need to set this property.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 9, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:05/11/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css>', 'Title': 'How to make adorners in html?', 'ViewCount': 615, 'id': 37161346, 'user_AboutMe': '<p>Nice videos worth watching:</p>\n<ul>\n<li><a href="https://vimeo.com/204075759" rel="nofollow noreferrer">What were they thinking? Language design choices that seem wrong, until they don’t - Bill Wagner</a></li>\n<li><a href="https://vimeo.com/97329157" rel="nofollow noreferrer">Seven Ineffective Coding Habits of Many Programmers - Kevlin Henney</a></li>\n<li><a href="https://vimeo.com/97471514" rel="nofollow noreferrer">Code that fits your brain - Adam Tornhill</a></li>\n<li><a href="https://vimeo.com/157710445" rel="nofollow noreferrer">Clean Code: A Reader-Centered Approach - Matthew Renze</a></li>\n<li><a href="https://vimeo.com/157708450" rel="nofollow noreferrer">SOLID Deconstruction - Kevlin Henney</a></li>\n<li><a href="https://vimeo.com/113594282" rel="nofollow noreferrer">Self-documenting Code: A Mob Powered Vocabulary Lesson - Cory House</a></li>\n<li><a href="https://skillsmatter.com/skillscasts/4971-domain-driven-design-with-scott-wlaschin" rel="nofollow noreferrer">DDD, F# and Types</a></li>\n</ul>\n', 'user_AccountId': 558599.0, 'user_DisplayName': 'Pavel Voronin', 'user_Reputation': 12923.0, 'user_Views': 1369.0, 'user_id': 921054.0}}