jquery - In javascript or css, how to detect if an elements is over-hidden by some of his parents? -

as see in page, every red hidden parents, reds not.

i want use javascript (or jquery) detect error reds , change postion easy-view position.

please me!

update 1: trying use css, still have errors

thanks buzinas , charlietfl, but:

i can use css select red, when move them down bit, over-hide text of link, @ links, can not read first word. see in image below:

update 2: running testing page

page: http://mp3.zing.vn/

to show reds, should run these code in console:

        sohientai = 1         $("body").append("<style>.bstalktochrome_btn {display:none}.bstalktochrome {font-size: 9px;padding: 0px 1px !important;font-weight: bold;max-width: 40px;position: absolute !important;top: -3px !important;left: 0px !important;line-height: normal;z-index:100000;background-color: rgba(236, 2, 2, 0.7) !important; color: rgba(255, 255, 255, 0.85) !important;margin: 0px !important;} [data-talktochrome]{position:relative !important;} </style>")         $("a").each(function(){             $(this).prepend('<span class="bstalktochrome" title="'+sohientai+'">'+sohientai+'</span>')             $(this).attr("data-talktochrome", sohientai)             sohientai++         }) 

update 3 : diptox & hieu le

so awkward red stuff , why want them , if don't mind ? , me saw of them correctly displayed

for every links or button of page, insert unique helper number them (the reds). user can use helper number interact links on page.

the problem @ time reds displayed cover first characters of links, user can not read them correctly or reds hidden parents.

i want show reds, user can read number of reds , can read link text without advanced too.