CSS: floating text

Question

I want the delete icon to appear when marked above the content (text). Now I have done this, but when it appears, it terribly moves the text.

See here: http://jsfiddle.net/AB4Ls/10/

How can I make it so that it “floats” over it so that it does not affect the text, but still appears

Answer 1

You need to "absolutely" put the close button, and not float in the content.

Just add this to your CSS:

.aL_Content{ position: relative } .delButton{ position: absolute; right: 0; top: 0; } 

And remove float:right from .delButton .

Answer 2

I changed your markup in your example on the very bottom block.

I changed the input to a div and split it from your original div, then position: relative; on .aL_Content and position: absolute; on .delbutton .

It's important to remove the float attribute, as this is what caused your text to wrap around the new element.

You can see my changes here in jsFiddle .

Answer 3

When using Bootstrap 4, according to the documentation, you can implement @ajcw's answer using these classes.

 <div class="position-relative"> <div class="position-absolute">...</div> <div class="content">...</div> </div> 

Then you should provide right:0; or your style according to your preference. Either by class or style attribute.