skip to Main Content

When I try to modify the way a web page is displayed in my browser, to not display certain elements, I added to its style display: hidden, but this CSS statement not only undisplays the elements, but also moves them out of the flow, pushing following elements ahead to take up space the left, which is not what I want exactly.

I want to just cover instead of delete these elements I don’t want to see, to make them displayed the same color as the background, without moving their place.

Which CSS property may help me out here?

2

Answers


  1. To hide elements without removing them from page flow you can either:

    • Set the visibility to hidden (visibility: hidden;)
    • Set the opacity to 0 (opacity: 0;)
    Login or Signup to reply.
  2. There are two properties you can use instead of display: hidden :

    visibility: hidden : It hides the element from view but they will still occupy space on the page

    opacity: 0 : It will cover the element with same background as on the page as occupying space.

    If you want the elements to be completely invisible but still occupy space, use visibility: hidden If you want the elements to be transparent but still occupy space, use opacity: 0

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search