CSS div elements overlapped by the bottom div element

Question

I have many number of div elements and in the last div element i used position: fixed; for not to change the position of the element while scrolling.

So the issue is some of the top div elements gets overlapped by the bottom div element because it has css like this.

#div1 {
  position: fixed;
  background: blue;
  font-size: 50px;
  bottom: 0;
}

Fiddle Link attached

Adding some padding-bottom to the body element would give you the expected result? — Fabrizio Calderan, May 15 '18 at 08:12
List of all elements should appear without hiding behind the bottom element.@AjAX. — htoniv, May 15 '18 at 08:14
[Just add some `
` after it.](https://jsfiddle.net/pL1s6jpz/77/) — deEr., May 15 '18 at 08:20

score 1 · Answer 1 · answered May 15 '18 at 08:23

Add some padding on the parent element, in this case the <body>:

body {
  padding-bottom: 65px;
}

#div1 {
  position: fixed;
  background: blue;
  font-size: 50px;
  bottom: 0;
}

<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a19</div>
<div>a20</div>
<div>a21</div>
<div>a22</div>
<div>a23</div>
<div>lastdiv</div>

<div id="div1">
  Example
</div>

You're welcome. Could you mark it as the accepted answer? Thanks. — Jos van Weesel, May 16 '18 at 07:54

score 0 · Answer 2 · answered May 15 '18 at 08:12

0

You can try adding z-index to it. Try this code.

#div1 {
  position: fixed;
  background: blue;
  font-size: 50px;
  bottom: 0;
  z-index: 99;
}

answered May 15 '18 at 08:12

Aryan Twanju

2,464
1
9
12

It is woring without z-index also.. thanks. Pls post if there is anyother solution. thans in advacne. – htoniv May 15 '18 at 08:15

score 0 · Answer 3 · answered May 15 '18 at 08:30

0

First : for access to last div , you dont need id

Replace this code :

div:last-child {
  position: fixed;
  background: blue;
  font-size: 50px;
  bottom: 0;
}
div:nth-last-child(2) {
  height:75px;
}

answered May 15 '18 at 08:30

Mohammad Esmaeili

155
2
2
12

CSS div elements overlapped by the bottom div element

3 Answers3