CODEWITHSUNDEEP
htmlcssangular
Jane. D
Jane. D

Reputation: 23

How to prevent component from overlapping content?

I have created an angular component called toolbar and applied the following CSS to it.

position: fixed;
z-index: 999;
height: 100px;

I used position to fix my toolbar to the page whenever I scroll the page. I used z-index to display the toolbar over all other elements on the page.

This makes up for an individual element that I used in the app.component.html.

My problem is, when creating a page using a new component, if I navigate to said page, the 'newcomponent works!' does not show up because the toolbar overlaps it.

I wish to make my toolbar fixed in a way that if I had any new element, whatever element I display, it appears right under the toolbar instead of underneath it.

Thanks for your help!

Upvotes: 2

Views: 2061

Answers (1)

Mat Sz
Mat Sz

Reputation: 2552

What could help you is position: sticky; which is exactly what you're asking for.

Here is an example (you need to specify the position, for example top: 0 for position: sticky to take effect):

body, html {
  margin: 0;
  padding: 0;
}

.toolbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 999;
  height: 100px;
  width: 100%;
  background: red;
  opacity: 0.5;
}

.contents {
  height: 5000px;
}
<div class="toolbar">xyz</div>
<div class="contents">
  <div>contents</div>
</div>

Upvotes: 2

Related Questions