1

How to use JS to determine the real visibility of an element?

For example, there is the following demo

.red{
  width: 100px;
  height: 100px;
  left: 20px;
  top: 20px;
  background: red;
  position: absolute;
}
.blue{
  width: 50px;
  height: 50px;
  left: 60px;
  top: 60px;
  background: blue;
  position: absolute;
}
.green{
  width: 100px;
  height: 100px;
  left: 50px;
  top: 50px;
  background: green;
  position: absolute;
}
<div class='red'></div>
<div class='blue'></div>
<div class='green'></div>

How can I check that the "blue" element is not visible on the screen? Is there a way to determine the real visibility of an element at a given time to the human eye? Same question with z-index. checking all elements and comparing which z-index is not an option, of course, and the elements can be in different positions.

adiga
  • 34,372
  • 9
  • 61
  • 83
Elvis
  • 83
  • 2
  • 7
  • You mean within the scope of the document viewport? – s.kuznetsov Jan 11 '21 at 11:53
  • 1
    Why you need that kind of info? Maybe if you put elements in page yourself, maybe then you can clearly know what and when is hidden and work around it? – Justinas Jan 11 '21 at 11:59
  • 1
    You will need to give more details on your real use case. What shape are your elements? Are they inside a div? Do you need to test, if the element is off screen? Etc. – yunzen Jan 11 '21 at 12:00
  • Your question now is too complicated. E.g. you have some parent element with `width: 0; height: 0; overflow: hidden` or `opacity: 0` or `visibility: hidden` or `color: transparent; background-color: transparent;` – Justinas Jan 11 '21 at 12:03
  • There's also [javascript - How to detect if an element is covered/overlapped by another one? - Stack Overflow](https://stackoverflow.com/questions/32713250/how-to-detect-if-an-element-is-covered-overlapped-by-another-one) – user202729 Jan 11 '21 at 12:08

0 Answers0