定位属性的布局网页html,css布局基础：定位综合练习

主要知识点：

1、5种常用

position:static/relative/absolute/fixed/sticky。

2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。

整体效果图：

效果说明：

1、随着网页向下滚动，当导航到达窗口顶端(top=0)时，固定在顶端。

2、分享模块在屏幕的固定位置显示。

3、banner图是由3部分堆叠组成：底层图片、中层透明遮罩层、顶层文字加按钮。

参考：

导航吸附效果：

nav{ position: sticky; top: 0; z-index: 9999; }

分享模块固定显示：

.share{ position: fixed; left: 100%; margin-left: -100px; bottom: 50px; width: 100px; ...}

3层banner图部分：

html结构部分：

MY BEAUTIFUL LIFE

LOOK MORE   >

css效果：

.top{ position: relative; }

.top img{ width: 100%; height: 200px; }

.top div:nth-child(2){

width: 100%;

height: 200px;

background-color: #000000;

opacity: 0.5;

position: absolute; /*最近定位祖先元素为.top*/

top:0;

left: 0;

}

.top div:nth-child(3){

position: absolute;

width: 350px;

height: 80px;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto auto; /*四边都为0，margin为auto，居中*/

text-align: center; /*内容又居中*/

}

本文来自投稿，不代表中国网页设计立场，如若转载，请注明出处：http://www.125jz.com/5538.html