在H5的開發中，CSS樣式在網頁布局中扮演著重要的角色。而底部上面的布局設計，也是需要我們掌握的一項技能。

.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #333;
color: #fff;
}

上述代碼就是一個底部固定的示例。通過定位的方式，將該元素的位置固定在頁面的底部，且不受其他元素的影響。其中，可調整的部分包含寬度、高度、背景顏色等。

底部上面的設計還可以通過“flex布局”進行實現，同時保證頁面中的其他內容不會受到影響。

.container{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content{
flex: 1;
background-color: #fff;
color: #333;
padding: 20px;
}
.footer{
height: 100px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}

以上代碼采用了“flex布局”，其中container為父元素，content為內容區域，而footer則設計在內容區域的下方。通過調整各元素的高度及布局方式，實現了底部上面的最終效果。

總之，底部上面設計需要理解好定位、flex布局等知識點，掌握好這些技能，我們就可以輕松實現所需的頁面效果。