Bootstrap and highlighted text

HTML & CSS
1

I have tested Bootstrap and highlighted text. It seems it uses

<MARK>

element. Is there any possibility to make clear fix and stop styles as any custom designed highlighted text will be corrupted due to this.

2

I really didn’t understand what you are asking and what you want to achieve - sorry! Maybe some code or an example would help

3

Boostrap V3 (I have not tested upper version…) uses

mark {
  color: #000;
  background: #ff0;
}

If you use a code like:

<mark class="highlight">Register Now!</mark>

It will corrupt all elements if you place custom code. Probably, it is the best to manually remove this line from Bootstrap.

4

I have solved using unique element for this element called mark. In this way it is not needed to eliminate Bootstrap original styling as it should be kept as it is. Another issue is also Z-index due to highlighted text.

When I place code without Bootstrap it will eliminate highlighted text. Is this Bootstrap issue as Z-index -1 will not work? I mean, is it allowed -1 inside Bootstrap?

5

The mark element is much like other html elements in that it has some default user agent (UA) styling to give it a colour and a background.

In Chrome you get a yellow background and a black text by default. Normalise .css (usually included with bootstrap) applies the same styles so there is no change to the default. Bootstrap 3 only changes the background color to #fcf8e3 and adds .2em padding.

If you want to use your class of .highlight then you only need to address those 3 values plus whatever else you wanted.

e.g.

mark.highlight {background:red;color:blue;padding:0 .5em;}

No need to use the wrong element for the job and no need to change the bootstrap defaults.

I have no idea what that means as z-index has nothing to do with any of this unless you are absolutely placing an element on top of another element.

z-index:-1 is perfectly valid and will move the element below other elements of higher z-index within the same stacking context. If a parent is not positioned or has an auto z-index you could find the background goes below the background of the parent. A positioned parent with a z-index other than auto is atomic and no positioned elements can escape that context and will not appear under a parent’s background.

This is pretty basic css for z-index so is worth studying if you are still unsure how it all works together :slight_smile:

2 Likes
7

Thank you for the message. I will test further as I do not get it how it is possible Z-index: 1 works but Z-index: -1 will eliminate highlight effect. Maybe text uses background color and it will be priority.

8

I thought I explained the mechanism already :slight_smile:

z-index-1 (along with a position value other than auto) will move the element below its non positioned parent’s background.

9

Thnak you for the message.
I have solved inside Bootstrap. When I add Z-index as 0 for my span element it will be working. Pseudo element will be Z-index: -1.

10

Yes that’s what I’ve been saying all along.

Once you apply a value to a positioned parent then any child z-indexes cannot go below the parent even if they are z-index: -100000. The parent itself can be any z-index number that fits in with the current stacking context and the children will not go below the parent’s background. However if the positioned parent is z-index:auto (the default) then a positioned child with a z-index of less than zero will go below the parents background.

This is the basics of CSS and z-index and has nothing at all to do with bootstrap :slight_smile:

11

It works now.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.