How do I specify a particular CSS class to use?

Question

I have an html block that looks like this:

…

With css for the classes looking like so:

#stage {
    position: absolute
}

.ticker.universal {          
    position: relative;
}

The issue I'm having is that the .ticker.universal position property is getting overriden by #stage position property. when I look at the elements in the browser console, the positon for .ticker.universal is actually striked out.

I have tried adding !important to .ticker.universal postion, it worked but I'm trying to avoid using !important.

Please what other way can I resolve this issue?

user_19167964 · Answer

Follow the URL below to better solve your problem.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://css-tricks.com/almanac/properties/p/position/

      #stage {  
         position: relative;
         
          /*Apply your css code */
         height: 300px;
         width: 600px;
         background-color: beige;
      }

      #stage .ticker-universal {
         position: absolute;
         
          /*Apply your css code */
         height: 50px;
         width: 100px;
         background-color: coral;
         top: 0;
         left: 0;

      }

How do I specify a particular CSS class to use?

1 Answers