How to make the last <li> access to the footer of the parent <ul> of a certain height?

Question

I am trying to keep the last li attached to the bottom of the parent ul , which has a certain height. But as soon as I try to scroll the part, the last element also starts to move.

    ul {
    list-style-type:none;
    height:150px;
    position:relative;
    }
    li:last-child {
    position: absolute;
    bottom:0px;
    background-color: white;}

I created a demo for this: JSFIDDLE: http://jsfiddle.net/zrVPJ/2/

Answer 1

try this by editing your css.

li:last-child {
 background-color: #FFFFFF;
 bottom: 0;
 height: 22px;
 position: fixed;
 top: 127px;
}

JSFIDDLE

Answer 2

It’s clear that I’ll clarify.

There are two main differences between position:fixedand position:absolute;

document, window.

- , , fixed, .

- DOM, .

. , . ul, last-child, , ul , .

:

http://www.w3schools.com/css/css_positioning.asp